html table insert/delete rows（Table的行进行增加/删除）

最新推荐文章于 2025-12-06 16:49:03 发布

原创最新推荐文章于 2025-12-06 16:49:03 发布 · 2.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#table #html #button #function #delete

本文提供了一套详细的教程，介绍如何使用JavaScript动态地向HTML表格中添加和删除行元素。此外，还介绍了如何插入表头（THEAD）、表尾（TFOOT）及表格标题等高级功能。

Deleting table rows
<html> <head> <SCRIPT LANGUAGE="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 LANGUAGE="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, theTableBody function 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 functions function 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>