jquery給table增加行

jQuery是一個高效能、簡潔的JavaScript函式庫，可以大幅簡化JavaScript程式設計。對於web開發人員而言，我們經常需要透過新增行來擴充HTML表格（Table），那麼如何透過jQuery實作為table增加行呢？接下來，我們就來一起學習如何使用jQuery為table增加行。

1.在HTML中定義table表格

首先，在HTML頁面上定義我們所需的table表格。如下所示：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>23</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>

2.新增行

接下來，在jQuery中新增一行。我們可以透過建立一個包含td元素的tr元素來新增行。如下所示：

$(document).ready(function(){
  $('#addRowBtn').click(function(){
    $('#myTable tbody').append('<tr><td>赵六</td><td>26</td><td>教师</td></tr>');
  });
});

在這裡，我們使用jQuery選擇器選取了table的tbody，然後呼叫append函數在tbody中追加了新行。新增的一行是一個包含三個單元格的tr元素，每個單元格都包含一個值。你可以看到，我們透過使用jQuery在table中加入了一行。

3.透過循環加入多行

有時，我們需要透過循環將多行加入table。我們可以使用JavaScript循環來新增多行。如下所示：

$(document).ready(function(){
  $('#addRowsBtn').click(function(){
    for(var i = 0; i < 10; i++){
      $('#myTable tbody').append('<tr><td>姓名' + i + '</td><td>年龄' + i + '</td><td>职业' + i + '</td></tr>');
    }
  });
});

在這裡，我們使用for循環，循環10次，每次透過append函數在tbody中追加了一行。我們可以使用字串拼接的方法來定義每個單元格的值，並使用變數 i 讓每個單元格的值唯一。

4.在指定位置插入行

有時，我們需要在table的特定位置新增一行。這個時候，我們就需要指定要插入新行的特定位置。如下所示：

$(document).ready(function(){
  $('#addAtBtn').click(function(){
    var newRow = '<tr><td>张七</td><td>22</td><td>运动员</td></tr>';
    var targetRow = $('#myTable tbody tr:eq(2)');
    if(targetRow.length > 0){
      targetRow.before(newRow);
    }
  });
});

在這裡，我們定義了一個新行newRow，並透過選擇器選擇table中的第2個行targetRow。

然後，我們使用before函數將新行新增到targetRow之前。

要注意的是，如果targetRow不存在，則不會插入新行。如果想要加入行到第2個行之後，可以使用after函數來取代before函數。

總結

以上就是我們使用jQuery為table增加行的三種方式。我們可以透過append函數新增行，透過循環添加多行，或在特定位置插入新行。透過使用jQuery，我們可以快速、簡單地擴展HTML表格，並使網站更加強大和完整。

以上是jquery給table增加行的詳細內容。更多資訊請關注PHP中文網其他相關文章！