添加按鈕 table增加一行 刪減按鈕 table去掉一行

需求描述：做的一個AA新增功能，同時可以為這個即將新增的AA添加內容，而且AA的內容默認展示一行列表，點擊添加按鈕后出現下一行列表

解決思路：頁面首先展示一個表頭和列表的一行，作為默認展示的一行列表，然后對增加按鈕設置onclick，在onclick函數中動態的為table拼接<tr><td>；刪除行，直接調用分裝好的刪除table一行的函數就行，其實這個函數我當時就試了好嗷嗷嗷多遍，終於ok了，老規矩廢話不多，直接上代碼：

代碼：html的代碼table的  按鈕的那個就不貼了，就是對button加個onclick就行

<table class="table table-striped table-bordered table-hover table-checkable order-column" id="table1">
    <thead>
    <tr>
        <th>選項</th>
        <th>值</th>
        <th>排序</th>
    </tr>
    </thead>
    <tbody id="tbdy">
    <tr>
        <td><input type="text" name="names" id="names"/></td>
        <td><input type="text" name="values" id="values"/></td>
        <td><input type="text" name="sorts" id="sorts"/></td>
    </tr>
    </tbody>
</table>

頁面展示：

 

代碼：添加按鈕的onclick函數和刪減按鈕的onclick函數 實現添加行和刪減行的效果

addRowBut = function(){//添加按鈕的
var str = '<tr><td><input type="text" name="names" id="names" />' + '</td><td><input type="text" name="values" id="values"/>' + '</td><td><input type="text" name="sorts" id="sorts" />' + '</td>' + '</tr>';
$("#table1").append(str);
}

cutRowBut = function (){//刪減按鈕的
    var i= $("#table1 tr").length;//獲取整個table的<tr>的個數 這個數包含了表頭 恰當地說 是table的<tr>個數在加上一個<th> 
    if(i>2){//大於2  是因為要保留表頭和表的第一行默認行
        $("#table1 tr:last").remove();//js(也不知道還是jQ)反正就是封裝好的刪除 行 的方法了  這里要注意的是 那個last,表示從最后一行開始刪。
　　　　　　　　　　　　　　　　　　　　　//你們可以試試改變這個last,他會提示很多值first等等一大坨，我還試過first,在這里也一並說明了，就是從表的第一行開始刪除，如果沒有上面的if判斷，直接運行這行刪除代碼，那就是先刪除表頭，再刪除表的第一行，反正就是從頭開始刪就行了！！！
    }
}

說明：這兩個函數就是實現上邊的添加 刪減按鈕的 項目跑起來后 去頁面點擊 就可以動態添加行或者刪減行了

 

總結：剛拿到這個需求的時候，心里有點小懵逼，沒做過，但是覺得還有點意思，就想着這個該怎么做，實際敲代碼的過程中也是各種小問題。講真 這個真的不是特別難，就是特別耗時間。