您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
利用js动态添加删除table行的示例代码
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
如下所示： 代码如下: //动态添加行 function addRow(){ var table = document.getElementById("tableID"); var newRow = table.insertRow(); //创建新行 var newCell1 = newRow.insertCell(); //创建新单元格 newCell.innerHTML = ""； //单元格内的内容 newCell.setAttribute("align","center"); //设置位置 } //动态删除行 function deleteRow(){ var rowIndex = event.srcElement.parentElement.parentElement.rowIndex; var styles = document.getElementById("tableID"); styles.deleteRow(rowIndex); } <html> <head> <title></title> </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()"> <script> 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> </body> </html>- 上一个程序编程： js判断undefined类型,undefined,null的区别详细解析
- 下一个程序编程： JSON无限折叠菜单编写实例
