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

開發工具與關鍵技術： HTML5,Javascript

作者： 張金榮

撰寫時間： 2019 年 2 月 7 日

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

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 (); 這句代碼意思是擷取目前标簽的第一個父項的第一個父項，然後移除它，也就是移除目前行

如圖所示

自定義表格的控制就完成了，想删除哪行就删除哪行，這個方法仍純在不足,就是序号；即便你删除了所有行然後再添加行，序号會根據上一次添加最後一次的序号繼續遞增不會從零開始；暫時還沒有研究出解決方法。