| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7592283
建立时间:2006年5月29日 |
| |
|
 [Javascript]html table insert/delete rows
软件技术
lhwork 发表于 2007/1/7 14:11:52 |
| Deleting table rows
<html><head><script type="text/javascript">function deleteRow(i){ document.getElementById('myTable').deleteRow(i)}</script></head><body><table id="myTable" border="1"><tr> <td>Row 1</td> <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td></tr><tr> <td>Row 2</td> <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td></tr><tr> <td>Row 3</td> <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td></tr></table></body></html>
Adding table rows
<html><head><script type="text/javascript">function insRow(){ var x=document.getElementById('myTable').insertRow(2) var y=x.insertCell(0) var z=x.insertCell(1) y.innerHTML="NEW CELL1" z.innerHTML="NEW CELL2"}</script></head><body><table id="myTable" border="1"> <tr> <td>d</td> <td>d</td> </tr> <tr> <td>d</td> <td>d</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> <tr> <td>Row4 cell1</td> <td>Row4 cell2</td> </tr> <tr> <td>Row5 cell1</td> <td>Row5 cell2</td> </tr></table><form><input type="button" onclick="insRow()" value="Insert row"></form></body></html>
Inserting/Removing Row Elements
<HTML><HEAD><TITLE>Modifying Table Cell Content</TITLE><STYLE TYPE="text/css">THEAD {background-color:lightyellow; font-weight:bold}TFOOT {background-color:lightgreen; font-weight:bold}#myTABLE {background-color:bisque}</STYLE><SCRIPT LANGUAGE="JavaScript">var theTable, theTableBodyfunction init() { theTable = (document.all) ? document.all.myTABLE : document.getElementById("myTABLE") theTableBody = theTable.tBodies[0]}function appendRow(form) { insertTableRow(form, -1)}function addRow(form) { insertTableRow(form, form.insertIndex.value)}function insertTableRow(form, where) { var now = new Date() var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()] clearBGColors() var newCell var newRow = theTableBody.insertRow(where) for (var i = 0; i < nowData.length; i++) { newCell = newRow.insertCell(i) newCell.innerHTML = nowData[i] newCell.style.backgroundColor = "salmon" } updateRowCounters(form)}function removeRow(form) { theTableBody.deleteRow(form.deleteIndex.value) updateRowCounters(form)}function insertTHEAD(form) { var THEADData = ["Hours","Minutes","Seconds","Milliseconds"] var newCell var newTHEAD = theTable.createTHead() newTHEAD.id = "myTHEAD" var newRow = newTHEAD.insertRow(-1) for (var i = 0; i < THEADData.length; i++) { newCell = newRow.insertCell(i) newCell.innerHTML = THEADData[i] } updateRowCounters(form) form.addTHEAD.disabled = true form.deleteTHEAD.disabled = false}function removeTHEAD(form) { theTable.deleteTHead() updateRowCounters(form) form.addTHEAD.disabled = false form.deleteTHEAD.disabled = true}function insertTFOOT(form) { var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"] var newCell var newTFOOT = theTable.createTFoot() newTFOOT.id = "myTFOOT" var newRow = newTFOOT.insertRow(-1) for (var i = 0; i < TFOOTData.length; i++) { newCell = newRow.insertCell(i) newCell.innerHTML = TFOOTData[i] } updateRowCounters(form) form.addTFOOT.disabled = true form.deleteTFOOT.disabled = false}function removeTFOOT(form) { theTable.deleteTFoot() updateRowCounters(form) form.addTFOOT.disabled = false form.deleteTFOOT.disabled = true}function insertCaption(form) { var captionData = form.captionText.value var newCaption = theTable.createCaption() newCaption.innerHTML = captionData form.addCaption.disabled = true form.deleteCaption.disabled = false}function removeCaption(form) { theTable.deleteCaption() form.addCaption.disabled = false form.deleteCaption.disabled = true}// housekeeping functionsfunction updateRowCounters(form) { var sel1 = form.insertIndex var sel2 = form.deleteIndex sel1.options.length = 0 sel2.options.length = 0 for (var i = 0; i < theTableBody.rows.length; i++) { sel1.options[i] = new Option(i, i) sel2.options[i] = new Option(i, i) } form.removeRowBtn.disabled = (i==0)}function clearBGColors() { for (var i = 0; i < theTableBody.rows.length; i++) { for (var j = 0; j < theTableBody.rows[i].cells.length; j++) { theTableBody.rows[i].cells[j].style.backgroundColor = "" } }}</SCRIPT></HEAD><BODY onLoad="init()"><H1>Modifying Tables</H1><HR><FORM NAME="controls"><FIELDSET><LEGEND>Add/Remove Rows</LEGEND><TABLE WIDTH="100%" CELLSPACING=20><TR><TD><INPUT TYPE="button" VALUE="Append 1 Row" onClick="appendRow(this.form)"></TD><TD><INPUT TYPE="button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index: <SELECT NAME="insertIndex"> <OPTION VALUE="0">0 </SELECT></TD><TD><INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED onClick="removeRow(this.form)"> at index: <SELECT NAME="deleteIndex"> <OPTION VALUE="0">0 </SELECT></TD></TR></TABLE></FIELDSET><FIELDSET><LEGEND>Add/Remove THEAD and TFOOT</LEGEND><TABLE WIDTH="100%" CELLSPACING=20><TR><TD><INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD" onClick="insertTHEAD(this.form)"><BR> <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD" DISABLED onClick="removeTHEAD(this.form)"></TD><TD><INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT" onClick="insertTFOOT(this.form)"><BR> <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT" DISABLED onClick="removeTFOOT(this.form)"></TD></TR></TABLE></FIELDSET><FIELDSET><LEGEND>Add/Remove Caption</LEGEND><TABLE WIDTH="100%" CELLSPACING=20><TR><TD><INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption" onClick="insertCaption(this.form)"></TD><TD>Text: <INPUT TYPE="text" NAME="captionText" SIZE=40 VALUE="Sample Caption"><TD><INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED onClick="removeCaption(this.form)"></TD></TR></TABLE></FIELDSET></FORM><HR><TABLE ID="myTABLE" CELLPADDING=10 BORDER=1><TBODY></TABLE></BODY></HTML> |
|
|