HTML 中动态增加、删除行的实现

来源：互联网发布：淘客助手插件 mac 编辑：程序博客网时间：2024/05/16 09:29

动态地增加一行，或删除指定的一行。

用到了HTML的DOM对象。

主要是insertRow(), insertCell(), deleteRow()方法的使用。

<html>
  <head>
    <title>addrow.html</title>
      <script type="text/javascript">
    
        var num = 1;
        
        function addRow() {
            var tb = document.getElementById("mytableid");
            var row = tb.insertRow();
            var cell = row.insertCell();
            cell.innerText = "第" + num + "行";
            num++;
            cell = row.insertCell();
            cell.innerHTML = "<input type='text' value = '新一行'>";
            
        }
        
        function delRow() {
            var rowIndex = document.getElementById("delTextId").value;
            var tb = document.getElementById("mytableid");
            tb.deleteRow(rowIndex-1);
        }
    </script>
    
  </head>
  
  <body>
    <table id="mytableid">
        <!-- <tr><td>第一行</td><td>输入</td></tr> -->
    </table>
    
    <input type="button" value="新增一行" onclick="addRow()" />
    <br>
    <input type="text" id="delTextId" />
    <input type="button" value="删除选择行" onclick="delRow()" />
  </body>
</html>