How to add rows to table in jquery

Today, let’s discuss how to use jQuery to add rows to a table. If you are a web developer, you must know that presenting data on the page is important. Table is a very good way to present data. To use tables to display data, you must know how to use jQuery to dynamically add rows.

Let's take a look at how to add rows to a table using jQuery.

The first step is to obtain the table object. If you already have a table object, you only need to use the following line of code in jQuery to get it:

var table = $('table');

If you do not have a table object, then you need to use the following line of code to create a table object ：

var table = $('<table></table>');

The second step is to create a row object. To create a row object, you need to use the following line of code:

var row = $('<tr></tr>');

The third step is to create a cell object. To add a cell to a row, you need to use the following line of code:

var cell = $('<td></td>');

The fourth step is to add the cell object to the row object.

row.append(cell);

The fifth step is to add the row object to the table object.

table.append(row);

Now, you have finished adding a row of cells to the table.

However, in a real application, you need to add multiple cells to each row in the table, and perhaps each cell has different data and styles. In this case, you need to use a loop ( for loop) to build a complete table. Next, let's take a look at the complete code:

var data = [
    {name: 'John', age: 30},
    {name: 'Jane', age: 28},
    {name: 'Bob', age: 35},
    {name: 'Mary', age: 29}
];

var table = $('<table></table>');
    
for(var i = 0; i < data.length; i++){
    var row = $('<tr></tr>');
    var name = $('').text(data[i].name);
    var age = $('').text(data[i].age);
        
    row.append(name).append(age);
    table.append(row);    
}

$('#tableWrapper').empty().append(table);

This code uses a for loop to traverse a data list and use the text() method to add text to the cell. Finally, use the empty() method to clear the content of the #tableWrapper element, and use the append() method to add the table object to it, completing the construction of the entire table table.

Summary:

In this article, we learned how to use jQuery to add single rows and multiple rows to a table. This is a very useful technique, especially when you need to add dynamic data to the page. Now that you have mastered how to add rows to a jQuery table, go and try it out!

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