js操作html增加删除tr/td
总结：可以通过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><!-- sample table grid with 3 columns and 4 rows that are presented by default --><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)
页:
[1]