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