源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

利用js动态添加删除table行的示例代码

  • 时间:2020-02-25 12:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:利用js动态添加删除table行的示例代码
如下所示:
[u]复制代码[/u] 代码如下:
[b]//动态添加行 [/b]function addRow(){    var table = document.getElementById("tableID");    var newRow = table.insertRow(); //创建新行    var newCell1 = newRow.insertCell(); //创建新单元格    newCell.innerHTML = ""; //单元格内的内容    newCell.setAttribute("align","center"); //设置位置 } [b]//动态删除行 [/b]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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部