html table insert/delete rows(Table的行进行增加/删除)
2009-08-25 14:59
295 查看
Deleting table rows
Adding table rows
Inserting/Removing Row Elements
<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>
相关文章推荐
- 数据库 误操作(更新数据(Update),删除数据(delete),当然也包括增加大量数据(insert))之后,给出的解决方案
- HTML增加删除邮件(table)
- 通过JS为 Table表增加一行,通过复选框删除多行,也可通过所在行的delete链接删除本行
- html,javescript完整操作Table的增加行,删除行的列子大全
- JQuery对Table进行全选反选 增加节点 删除节点
- js动态控制table的tr、td增加及删除的具体实现
- delete和all-delete-orphan在进行删除操作时的不同
- 如何对SQL Server中的XML数据进行insert、update、delete
- 利用android提高的的insert,query,update,deleteAPI与execSql,rawQuery函数执行原生的插入,查询,更新,删除语
- mysql之table:update,delete(删除修改行)
- js操作html的table,包括添加行,添加列,删除行,删除列
- javascript开发系列(table操作,table增加一行,删除一行,取行号,列号)
- PLSQL_闪回删除FlashBack Delete表误删除如何进行恢复(案例)
- 动态table 动态增加删除行
- HTML中利用堆栈方式对Table进行行排序
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
- CRUD:增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)
- 转载:SQL through PowerShell 使用Powershell访问SQL并对数据进行读写增加删除操作
- HTML js 增加,删除,修改,查找,排序
- Table.Rows.Remove(dr)和Table.Delete()的区别