Comment modifier la valeur tr dans jquery

jQuery est une bibliothèque JavaScript populaire qui facilite la modification du DOM HTML. Dans cet article, nous apprendrons comment modifier la valeur tr dans un tableau HTML à l'aide de jQuery.

Tout d'abord, considérons l'exemple de tableau HTML suivant :

                                                                                   

第一行第一列	第一行第二列
第二行第一列	第二行第二列
第三行第一列	第三行第二列

Nous allons maintenant utiliser jQuery pour modifier la valeur de la deuxième ligne. Tout d’abord, nous devons stocker l’élément tr de la deuxième ligne dans une variable. Ceci peut être réalisé par :

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

Cela sélectionnera le deuxième élément tr du tableau (remarque : dans jQuery, l'indexation est basée sur 0) et le stockera dans la variable "row".

Ensuite, nous pouvons utiliser la fonction text() de jQuery pour modifier la valeur de la cellule dans la ligne. Par exemple, le code suivant mettra à jour la première cellule de la deuxième ligne :

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

Ce code utilise la fonction find() pour sélectionner le premier élément td de la deuxième ligne (c'est-à-dire la cellule d'index 0) et sa valeur texte est défini sur "nouvelle valeur".

Si vous devez modifier la valeur de plusieurs cellules en même temps, vous pouvez utiliser un code comme celui-ci :

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

Cela mettra respectivement à jour les valeurs de la première et de la deuxième cellule de la deuxième ligne.

Enfin, nous pouvons ajouter du style CSS pour faire ressortir davantage la valeur modifiée :

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

Cela rendra la cellule mise à jour plus facile à voir.

En résumé, il est très simple d'utiliser jQuery pour modifier la valeur tr dans un tableau HTML. Vous pouvez facilement mettre à jour la valeur d’une cellule simplement en utilisant la fonction text() et la fonction find().

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!