代码描述:javascript动态 删除和添加 表格行。javascript动态删除和添加表格行代码实例下载
在实际应用中,可能需要动态的删除或者添加表格的行,本章节就通过代码实例简单介绍一下如何实现此效果,希望能够给需要的朋友带来一定的帮助,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> function addRow() { var newTr = testTbl.insertRow(); //添加列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); var newTd2 = newTr.insertCell(); var newTd3 = newTr.insertCell(); //设置列内容和属性 newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text; newTd1.innerText = document.all("b").value; newTd2.innerText = document.all("c").value; newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">'; } function del(o) { var t=document.getElementById('testTbl'); t.deleteRow(o.parentNode.parentNode.rowIndex) } </script> </head> <body> <table id="testTbl" border=1> <tr> <td> 产品名称 </td> <td> 产品数量 </td> <td> 产品单价 </td> </tr> <tr> <td><select name="a"> <option value="电子">电子</option> <option value="电器">电器</option> </select></td> <td><input type="text" name="b"></td> <td><input type="text" name="c"></td> </td> </table> <input type="button" name="Submit2" value="添加" onclick="addRow()"> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能