js操作html增加删除tr/td

eason26_li · 发表于 2013-2-7 21:06:21

总结：可以通过parentElement定位父级元素，有待验证
<html> <head> <title>Adding and Removing Rows from a table using DHTML and JavaScript</title> <script language="javascript"> //add a new row to the table function addRow() { //add a row to the rows collection and get a reference to the newly added row var newRow = document.all("tblGrid").insertRow(); //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes var oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t1'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t2'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>"; } //deletes the specified row from the table function removeRow(src) { /* src refers to the input button that was clicked. to get a reference to the containing <tr> element, get the parent of the parent (in this case case <tr>) */ var oRow = src.parentElement.parentElement; //once the row reference is obtained, delete it passing in its rowIndex document.all("tblGrid").deleteRow(oRow.rowIndex); } </script> </head> <body> Demo of a simple table grid that allows adding and deleting rows using DHTML and Javascript <p/> Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row. <p/> <p/>Browser compatility - this sample has been tested to work with IE5.0 and above. <p/> <hr>  <table id="tblGrid" style="table-layout:fixed"> <tr> <td width="150px">Field1</td> <td width="150px">Field2</td> <td width="250px">Field3</td> </tr> <tr> <td><input type="text" name="t1" /></td> <td><input type="text" name="t2" /></td> <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" /></td> </tr> <tr> <td><input type="text" name="t1" /></td> <td><input type="text" name="t2" /></td> <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" /></td> </tr> <tr> <td><input type="text" name="t1" /></td> <td><input type="text" name="t2" /></td> <td><input type=&quot;text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" /></td> </tr> <tr> <td><input type="text" name="t1" /></td> <td><input type="text" name="t2" /></td> <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" /></td> </tr> </table> <hr> <input type="button" value="Add Row" /> <hr> <a href='http://www.interviewboard.com'>Interviewboard - Interview Questions and Answers on ASP.NET, C#, SQL, Oracle and more....</a> </body></html>文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/200897/139878.html)

		自动登录	找回密码
密码			立即注册