Use jQuery to implement: dynamically modify table row attributes-JS Tutorial-php.cn

Use jQuery to implement: dynamically modify table row attributes

PHPz

Release： 2024-02-26 14:00:54

Original

1196 people have browsed it

jQuery 实例：动态改变表格行的属性值

jQuery is a popular JavaScript library used to simplify DOM manipulation and event handling in web development. In web development, the display and operation of tables are often involved, and dynamically changing the attribute values of table rows is a common requirement. This article will use a specific example to demonstrate how to use jQuery to dynamically change the attribute values of table rows.

In this example, assume that we have a table containing student information, where each row represents a student, including student name, student number, grades and other information. We want to implement a function that can dynamically change the background color of a row when the user clicks on it. Next, we will implement this feature step by step.

First, we need to define a table containing student information in HTML. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Student Information</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('tr').click(function() {
                $(this).css('background-color', 'yellow');
            });
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>学生姓名</th>
                <th>学号</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>001</td>
                <td>90</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>002</td>
                <td>85</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>003</td>
                <td>88</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Copy after login

In the above code, we use jQuery's click event to listen for the row click event of the table. When the user clicks on a row of the table, the click event will be triggered, and then use jQuery's css method to dynamically change the background color of this row to yellow.

Through the above code, when the user clicks on any row in the table, the background color of the row will change to yellow, thus achieving the effect of dynamically changing the attribute values of the table rows.

Summary: Through this example, we show how to use jQuery to dynamically change the attribute values of table rows, where the click event of the row is monitored through the click event, and then uses css Method to change the style of a row. The above is our specific code example to implement this function. Hope this article can be helpful to readers.

The above is the detailed content of Use jQuery to implement: dynamically modify table row attributes. For more information, please follow other related articles on the PHP Chinese website!