动态添加和删除表格的行(HTML源码)

    xiaoxiao2025-01-30  6

    实现:

    (除去操作所占的一行)点击添加一行为表格追加一行,点击删除一行删除掉表格的最后一行,表格内容剩余一行时不能再删除。

    实现效果:

    初始:

    添加行:

    删除到最后一行时再删除:

    代码:

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的添加和删除行</title> <style> .table{ font-size: 20px; } </style> <script> var index = 1; function add(){ //获取新节点的索引 index = index + 1; //创建一个新的节点 var trNode = document.createElement("tr"); trNode.innerHTML = "<tr id='tr' align='center'><td align='center'id='td'>"+index+"</td><td><input type='text'/></td><td><input type='text'/></td></tr>" var tbNode = document.getElementById("tb"); //添加 tbNode.appendChild(trNode); } function del(){ if(index == 1){ alert("不能再删除了呀。。。"); }else{ var tbNode = document.getElementById("tb"); var delNode = tb.lastChild; tbNode.removeChild(delNode); index = index - 1; } } </script> </head> <body> <table align="center" border="1px" bgcolor="pink"> <thead> <tr align="center"> <td>编号</td> <td>姓名</td> <td>密码</td> </tr> </thead> <tbody id="tb"> <tr class="tr" align="center"> <td>1</td> <td><input type="text"/></td> <td><input type="text"/></td> </tr> </tbody> <tbody> <tr align="center"> <td colspan="3"> <input type="button" value="添加一行" onclick="add()"/> <input type="button" value="删除一行" onclick="del()"/> </td> </tr> </tbody> </table> </body> </html>

     

    最新回复(0)