jQuery Tips: How to Change Table Row Properties-JS Tutorial-php.cn

jQuery Tips: How to Change Table Row Properties

WBOY

Release： 2024-02-27 17:27:03

Original

921 people have browsed it

jQuery Tips: How to Change Table Row Properties

Title: jQuery Tips: How to Change Table Row Properties

Text:

In web development, tables are one of the commonly used elements. Changing table row attributes through jQuery can make the page more interactive and dynamic. This article will introduce some methods of using jQuery to change table row properties and provide specific code examples.

1. Add hover effect to table rows
To achieve the effect of changing the background color of the row when the mouse hovers over the table row, you can use the following code:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        tr:hover {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>第一行</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>内容</td>
        </tr>
    </table>
</body>
</html>

Copy after login

2. Change the color of table rows based on conditions
Sometimes we need to change the style of table rows based on certain conditions, such as displaying different colors based on the size of the value. The following code shows how to change the background color of table rows based on the size of the data:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("table tr").each(function(){
                var value = parseInt($(this).find("td:last").text());
                if(value > 50){
                    $(this).css("background-color", "green");
                } else {
                    $(this).css("background-color", "red");
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>数据1</td>
            <td>60</td>
        </tr>
        <tr>
            <td>数据2</td>
            <td>40</td>
        </tr>
    </table>
</body>
</html>

Copy after login

The above are two common methods of using jQuery to change table row properties. Through these techniques, you can make the web page more beautiful and dynamic. I hope the content of this article is helpful to you!

The above is the detailed content of jQuery Tips: How to Change Table Row Properties. For more information, please follow other related articles on the PHP Chinese website!