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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/feng_cs/article/details/2966402
  动态地增加一行,或删除指定的一行。
  用到了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="新增一行" οnclick="addRow()" />
    <br>
    <input type="text" id="delTextId" />
    <input type="button" value="删除选择行" οnclick="delRow()" />
  </body>
</html>

发布了26 篇原创文章 · 获赞 4 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_41926640/article/details/100155293