How to modify tr value in jquery

jQuery is a popular JavaScript library that makes it easy to modify the HTML DOM. In this article, we will learn how to modify tr value in HTML table using jQuery.

First, let us consider the following HTML table example:

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>
</table>

Now we will use jQuery to modify the value of the second row. First, we need to store the tr element of the second row in a variable. This can be achieved by:

var row = $('table tr:eq(1)');

This will select the second tr element in the table (note: in jQuery, indexing is 0-based) and store it in the "row" variable.

Next, we can use jQuery’s text() function to modify the cell value in the row. For example, the following code will update the first cell in the second row:

row.find('td:eq(0)').text('新值');

This code uses the find() function to select the first td element in the second row (i.e. the cell with index 0 ) and set its text value to "new value".

If you need to change the value of multiple cells at the same time, you can use code similar to the following:

row.find('td:eq(0)').text('新值1');
row.find('td:eq(1)').text('新值2');

This will update the first and second cell values ​​in the second row respectively .

Finally, we can add some CSS styling to make the modified value stand out more:

row.find('td:eq(0)').css('background-color', 'yellow');
row.find('td:eq(1)').css('background-color', 'orange');

This will make the updated cell easier to see.

In summary, it is very simple to use jQuery to modify the tr value in an HTML table. You can easily update the value of a cell simply by using the text() function and find() function.

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