自定义表格的添加行/删除行

自定义表格的添加行/删除行

1、创建好表头，定义好列名，以及删除控件的列，添加行的按钮

  <div class="row col-lg-12 col-md-12" style="margin-left:2px;">
   <button id="addrow">添加行</button>
     <table class="table"; id="tables"  "addRow()">
                <tr style="background:#2179dc;color:#f1ecec;">
                    <th>序号</th>
                    <th>列1</th>
                    <th>列2</th>
                    <th>删除</th>
                </tr>                                    
            </table>
   </div>

2、创建完成之后，就要写JavaScript添加行的代码了

var ssd=0;
  function addRow() { //往表格添加行
            ssd++;
            $("#tanles").append("<tr><td>" + ssd +
 "</td><td><input type='text'/></td><td><input type='text'/></td> " + 
 "<td><span 'DeleteRow(this)' class='glyphicon glyphicon-remove'></span></td></tr>");
        }
    function DeleteRow(TS) { //删除表格行
            var tr = $(TS).parent().eq(0).parent(0).remove();
        }

这个过程是通过声明一个自增变量，然后写一个方法往表格“my Table”里追加行，每追加一行，方法调用一次，序号就增加1；追加的行列数要等于表头的列数；
第二部就是写一个删除当前行的方法，“Remove(this)”在行尾的一个button控件调用这个控件，
$(ts).parent(0).parent(0).remove (); 这句代码意思是获取当前标签的第一个父项的第一个父项，然后移除它，也就是移除当前行
如图所示

自定义表格的控制就完成了，想删除哪行就删除哪行，这个方法仍纯在不足,就是序号；即便你删除了所有行然后再添加行，序号会根据上一次添加最后一次的序号继续递增不会从零开始；暂时还没有研究出解决方法。

---

作者：JR.Zhang
来源：CSDN
原文：https://blog.csdn.net/weixin_44543135/article/details/88923871
版权声明：本文为博主原创文章，转载请附上博文链接！