用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添加行，每點擊一次添加一行。（但有點不是很靈活的地方，就是新加行的內容都是固定的內容，大家可以根據自己的需求，適當修改一下）