用Jquery如何為Table添加行？

做網站前端開發，對Jquery都很熟悉了吧？它為我們操作HTML Dom提供了很多便利，下面我們一起看下用Jquery怎樣為一個table添加一行數據？

操作方法

01
要使用Jquery來操作，我們首先要在代碼里引入對應的腳本。
02
然后看下我們的html初始的 table，
<table id="tbl" class="table table-bordered">
<tr>
<td>1</td>
<td>A</td>
<td>a</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>b</td>
</tr>
</table>
03
再在html里加上一個按鈕，就是點擊這個按鈕為table添加一行.
<input type="button" class="btn btn-primary" value="添加行" onclick="add_tr()" />
代碼里添加了點擊事件，點擊后會調用 add_tr方法。
04
添加這個add_tr方法的具體邏輯
05
解釋下邏輯，定義一個數組，然后往數組里放入字符串，就是tr內容的字符串。
原table的每一行tr都由三個單元格td組成，所以新加的行也要三個td，每個td的內容也要對應設置。
然后把這個數組的內容用 join方法聯結成一個字符串，再用Jquery的append方法，把這個字符串附加到table的最后面。
06
具體的邏輯代碼已寫好，我們看下頁面，
07
在頁面上點擊按鈕，點擊后就會調用添加行的邏輯，我們可以看到新加的行，已成功添加到table里。
08
這個按鈕的邏輯可以多次點擊，多次為table添加行，每點擊一次添加一行。
（但有點不是很靈活的地方，就是新加行的內容都是固定的內容，大家可以根據自己的需求，適當修改一下）
End