js 动态自动添加 删除

Posted 2020-06-14

dome文件：

　　　　<form>
                    <table cellpadding="0" cellspacing="0" class="right-table"  style="border-collapse:collapse; width: 710px;" id="testTbl">
                        <tr>
                            <td style="width: 165px"><input type="text" class="text name" placeholder="Name"></td>
                            <td style="width: 180px"><input type="text" class="text value" placeholder="Value"></td>
                            <td style="width: 42px"><span class="del" onclick="del(this)"></span></td>
                        </tr>
                    </table>
                </form>

 

js文件：

<script type="text/javascript">
        //自动添加行
        function addRow() {
            var newTal = document.getElementById(‘testTbl‘).insertRow(0);
            var newTd0 = newTal.insertCell(0);
            var newTd1 = newTal.insertCell(1);
            var newTd2 = newTal.insertCell(2);
            newTd0.innerhtml = ‘<td style="width: 165px"><input type="text" class="text name" placeholder="Name"></td>‘;
            newTd1.innerHTML = ‘<td style="width: 180px"><input type="text" class="text value" placeholder="Value"></td>‘;
            newTd2.innerHTML = ‘<td style="width: 42px"><span class="del" onclick="del(this)"></span></td>‘;
        }

        //自动删除行
        function del(r){
            var i=r.parentNode.parentNode.rowIndex;
            document.getElementById(‘testTbl‘).deleteRow(i);
        }

    </script>

解释：

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素

该方法将创建一个新的 <td> 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

请注意，该方法只能插入 <td> 数据表元。若需要给行添加头表元，必须用 Document.createElement() 方法和 Node.insertBefore() 方法（或相关的方法）创建并插入一个 <th> 元素。