jquery给table增加行-前端问答-PHP中文网

jquery给table增加行

王林

发布： 2023-05-25 10:53:08

原创

997人浏览过

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中文网其它相关文章！