How to modify and add tables in jquery

With the development of front-end development, using jquery to operate page elements has become a very common practice. Among them, table operations are very frequent. This article will introduce how to modify and add tables in jquery.

1. Modify the table

1. Modify the table content

In jquery, you can select a table through .table or $(table) . Then you can use the .find() method to select an element in the table, as shown below:

$('table').find('tr:eq(2)').find('td:eq(1)').html('hello');

The above code means to modify the content of row 3 and column 2 of the table to hello.

2. Modify the table style

You can use the css() method to modify the table style, as shown below:

$('table').css('border', '1px solid red');

The above code means changing the border of the table Change the style to 1 pixel solid red line.

2. Add a table

1. Add a table row

You can use the append() or prepend() method to add a row at the end or beginning of the table. As shown below:

$('table').append('<tr><td>hello</td><td>world</td></tr>');

The above code means adding a row containing hello and world at the end of the table.

2. Add table columns

You can use the .append() or .prepend() method to add a cell at the end or beginning of the row, as shown below:

$('tr:eq(2)').append('<td>hello</td>');

The above code means adding a cell at the end of row 3 with the content hello.

To sum up, using jquery to modify and add tables is very simple, just use the relevant methods. Through the above introduction, everyone can quickly master how to operate tables in projects.

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