Utilisez jQuery pour modifier dynamiquement les attributs des lignes du tableau

Titre : Utiliser jQuery pour modifier dynamiquement les attributs des lignes de tableau

Dans le développement Web, nous rencontrons souvent le besoin de modifier dynamiquement les attributs des lignes de tableau. Cette fonction peut être implémentée facilement et efficacement à l'aide de jQuery. Ce qui suit utilise un exemple de code spécifique pour présenter comment utiliser jQuery pour modifier dynamiquement les attributs des lignes de table.

Tout d'abord, nous avons besoin d'une structure de tableau HTML simple :

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr data-id="1">
        <td>小明</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr data-id="2">
        <td>小红</td>
        <td>22</td>
        <td>女</td>
    </tr>
</table>

Ensuite, nous utilisons jQuery en JavaScript pour modifier dynamiquement les attributs des lignes du tableau. Nous pouvons ajouter un événement click à la ligne du tableau, puis modifier les propriétés de la ligne dans le gestionnaire d'événements, par exemple en changeant la couleur ou en ajoutant un nom de classe.

$(document).ready(function(){
    $("#myTable tr").click(function(){
        // 获取当前点击的表格行的data-id属性
        var id = $(this).attr("data-id");
        
        // 根据id选择需要修改属性的行
        var targetRow = $("#myTable tr[data-id='" + id + "']");
        
        // 修改行的背景颜色为黄色
        targetRow.css("background-color", "yellow");
        
        // 添加一个类名highlight
        targetRow.addClass("highlight");
    });
});

Dans le code ci-dessus, nous ajoutons un événement de clic à la ligne du tableau lorsque l'on clique sur la ligne du tableau, nous obtenons d'abord l'attribut data-id de la ligne cliquée, puis sélectionnons la ligne dont les attributs doivent être modifiés en fonction. sur cet attribut, et modifier sa couleur d'arrière-plan est jaune, et une surbrillance du nom de classe est ajoutée pour mettre en surbrillance cette ligne.

Enfin, nous pouvons définir le style de la classe de surbrillance dans la feuille de style pour fournir un effet d'affichage plus évident pour les lignes sélectionnées :

.highlight {
    font-weight: bold;
    color: red;
}

Grâce à l'exemple de code ci-dessus, nous pouvons implémenter la fonction de modification dynamique des attributs des lignes du tableau à l'aide de jQuery, Modifiez le style de ligne en cliquant sur la ligne du tableau. Cette méthode est simple et efficace et convient à de nombreux scénarios de développement Web dans lesquels les styles de tableaux doivent être modifiés de manière dynamique. J'espère que cet exemple vous aidera.

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!