jquery adds rows to table

jQuery is an efficient and concise JavaScript library that can greatly simplify JavaScript programming. For web developers, we often need to extend the HTML table (Table) by adding new rows. So how to add rows to the table through jQuery? Next, let's learn how to use jQuery to add rows to the table.

1. Define the table in HTML

First, define the table we need on the HTML page. As shown below:

<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. Add new row

Next, add new row in jQuery. We can add new rows by creating a tr element containing a td element. As shown below:

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

Here, we use the jQuery selector to select the tbody of the table, and then call the append function to append a new row to the tbody. The added row is a tr element containing three cells, each containing a value. You can see that we added a row to the table using jQuery.

3. Add multiple rows through loop

Sometimes, we need to add multiple rows to the table through loop. We can use JavaScript loop to add multiple rows. As shown below:

$(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>');
    }
  });
});

Here, we use a for loop to loop 10 times, each time appending a row to the tbody through the append function. We can use string concatenation to define the value of each cell, and use the variable i to make the value of each cell unique.

4. Insert a row at a specified position

Sometimes, we need to add a new row at a specific position in the table. At this time, we need to specify the specific location where the new row is to be inserted. As shown below:

$(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);
    }
  });
});

Here, we define a new row newRow, and select the 2nd row targetRow in the table through the selector.

Then, we use the before function to add the new row before the targetRow.

It should be noted that if targetRow does not exist, the new row will not be inserted. If you want to add a row after the second row, you can use the after function instead of the before function.

Summary

The above are the three ways we use jQuery to add rows to the table. We can add new rows through the append function, add multiple rows through a loop, or insert new rows at a specific position. By using jQuery, we can quickly and easily extend HTML tables and make the website more powerful and complete.

The above is the detailed content of jquery adds rows to table. For more information, please follow other related articles on the PHP Chinese website!