Conseils jQuery : Comment modifier les propriétés des lignes du tableau-js tutoriel-php.cn

Conseils jQuery : Comment modifier les propriétés des lignes du tableau

WBOY

Libérer： 2024-02-27 17:27:03

original

974 Les gens l'ont consulté

Conseils jQuery : Comment modifier les propriétés des lignes du tableau

Titre : Conseils jQuery : Comment modifier les attributs des lignes d'un tableau

Texte :

Dans le développement Web, les tableaux sont l'un des éléments couramment utilisés, et la modification des attributs des lignes d'un tableau via jQuery peut rendre la page plus interactive et plus dynamique. . Cet article présentera quelques méthodes d'utilisation de jQuery pour modifier les propriétés des lignes de table et fournira des exemples de code spécifiques.

1. Ajoutez un effet de survol aux lignes du tableau
Pour obtenir l'effet de changer la couleur d'arrière-plan de la ligne du tableau lorsque la souris survole la ligne du tableau, vous pouvez utiliser le code suivant :

<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>

Copier après la connexion

2. Changez la ligne du tableau couleur basée sur des conditions
Oui Parfois, nous devons modifier le style des lignes du tableau en fonction de certaines conditions, comme l'affichage de différentes couleurs en fonction de la taille de la valeur. Le code suivant montre comment modifier la couleur d'arrière-plan des lignes du tableau en fonction de la taille des données :

<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>

Copier après la connexion

Les méthodes ci-dessus sont deux méthodes courantes pour modifier les propriétés des lignes du tableau à l'aide de jQuery. Grâce à ces techniques, vous pouvez rendre la page Web plus belle. et dynamique. J'espère que le contenu de cet article vous sera utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!