jquery给table增加行

jquery是一个高效、简洁的javascript库，可以极大地简化javascript编程。对于web开发人员而言，我们经常需要通过添加新行来扩展html表格（table），那么如何通过jquery实现给table增加行呢？接下来，我们就来一起学习如何使用jquery给table增加行。

1.在HTML中定义table表格

首先，在HTML页面上定义我们所需的table表格。如下所示：

  

    

      
姓名
      
年龄
      
职业
    
  
  

    

      
张三
      
28
      
工程师
    
    

      
李四
      
32
      
设计师
    
    

      
王五
      
23
      
市场营销
    
  

2.添加新行

接下来，在jQuery中添加新行。我们可以通过创建一个包含td元素的tr元素来添加新行。如下所示：

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

在这里，我们使用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('姓名' + i + '年龄' + i + '职业' + i + '');
    }
  });
});

在这里，我们使用for循环，循环10次，每次通过append函数在tbody中追加了一行。我们可以使用字符串拼接的方法来定义每个单元格的值，并使用变量 i 让每个单元格的值唯一。

jQuery表格增加删除行响应式代码

jQuery表格增加删除行响应式代码

下载

4.在指定位置插入行

有时，我们需要在table的特定位置添加新行。这个时候，我们就需要指定要插入新行的特定位置。如下所示：

$(document).ready(function(){
  $('#addAtBtn').click(function(){
    var newRow = '张七22运动员';
    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表格，并使网站更加强大和完整。