Appliquer css sur une ligne précise d'un tableau

Version imprimable

07/05/2021, 12h09
onclepaulie

Appliquer css sur une ligne précise d'un tableau

Bonjour à tous,

Je ne sais pas si je me trouve dans la bonne rubrique mais j'aurais besoin de vos connaissances.

Je travaille sur un tableau créé en html, php / mysql. Et ce que je souhaiterais faire est un script qui permette d'appliquer une propriété css à une ligne précise car elle contient une donnée dans une cellule.

Pour illustrer mon propos, un exemple :

Nom Prénom Age Test

Snoop Dogg 50 Test

Tupac Shakur 47 Test

Notorious BIG 48 Test

Tupac Shakur 47 Test

J'aimerais faire un script qui fasse cette action : sur chaque ligne où "Shakur" apparait, appliquer une propriété css par exemple {font-weight:bold;} sur le mot Test de la même ligne.

Après de nombreuses recherches sur google, déjà je ne trouve pas comment déjà cibler une donnée d'une cellule.
Cela fait plus d'une semaine que je cherche. Encore une fois je ne sais pas si je suis à la bonne rubrique ou si une autre technologie permet de faire ce que je recherche.

Merci pour votre aide qui sera précieuse.
07/05/2021, 13h09
mathieu

ce qui se fait habituellement est de mettre une classe css sur les balises "tr".
ainsi vous pouvez cibler la case dont vous parlez avec un sélecteur .shakhur .test par exemple.
07/05/2021, 14h13
onclepaulie

Merci Mathieu. J'ai oublié de préciser que le tableau comporte des milliers de lignes. Du coup, j'ai du mal à visualiser comment je pourrais faire le script et la condition.
Vous me conseillez jquery, javascript ou un autre langage pour faire la condition avec le css ?
07/05/2021, 14h32
mathieu

oh désolé, je pensais qu'on était sur le forum css. ma 1re réponse reste quand même valable mais il manque des morceaux pour tout accrocher ensemble.

quand vous dites que vous voulez faire cela en jquery, c'est parce que vous n'avez pas toutes les informations au chargement la page ? donnez nous plus de détails sur ce que fait cette page.
07/05/2021, 15h16
onclepaulie

La page présente un tableau alimenté dynamiquement par une base de données sql, et il a été créée à l'aide d'une bibliothèque php qui s'appelle xcrud.
Le tableau vient afficher les données qui ont été enregistrés dans la base de données.
Je ne souhaite pas forcément utiliser jquery, n'étant pas très doué, je cherche un moyen de faire une condition facilement en manipulant les données inscrites sur le tableau.
Je voudrais faire un code qui ressemble grossièrement à ça dans l'idée : if(nom = Tupac && age == 47){this.row[test].css(font-weight:bold;)}

Ce code c'est du charabia, il n'est pas bon mais c'est pour vous donner une idée de ce que j'aimerais.
07/05/2021, 15h25
mathieu

vous pouvez essayer cela : $("td.nom:contains('Tupak')").closest("tr").find("td.case_test").
la 1re partie va chercher le texte dans le contenu. ensuite "closest" cherche la ligne parente et enfin "find" cherche la case dans la ligne.

vous pouvez regardez là pour plus d'informations sur les sélecteurs :
https://api.jquery.com/category/sele...lter-selector/
07/05/2021, 15h57
onclepaulie
Je me rapproche de plus en plus de mon but avec votre aide.
J'essaie d'appliquer le css lorsqu'il trouve le contenu mais ça ne fonctionne pas.
Code:

1 2 3 4 5 6 7 <script> $(document).ready( function () { $("td:contains('Tupac')").closest("tr").find('td:contains('Test').css( "font-weight", "bold" ); } ); </script>
Il y a pas un moyen de faire $("td:contains('Tupac')").closest("tr").('nomdelaclasse').css( "font-weight", "bold" ); ?

Bonjour et bienvenue sur DVP.

Je traiterais cela en JavasScript et en CSS.

Le JavaScript pour la recherche et l'affectation d'une classe sur la <tr> ;
Le CSS pour cibler la bonne colonne.

Côté JavaScript, without jQuery, cela donnerait, c'est une façon de faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // récup. <table> à traiter const oTable = document.querySelector("TABLE"); // récup. des lignes de celle-ci const oRows = oTable.rows; // le terme à trouver const search = "Search Term"; // la boucle de recherche for (let tr of oRows) { const text = tr.textContent; // lecture du contenu brut if (text.includes(search)) { // occurrence trouvé tr.classList.add("marque"); // on ajoute la classe à la <tr> } }
certes, c'est plus concis avec jQuery mais là au moins tu vois bien la démarche.

Maintenant le CSS.
La règle suivante sera prise en compte dès que tu auras affecté la classe à l'élément :
Code:

1 2 3 4 tr.marque td:nth-child(4) { background-color: #FDE; font-weight: 700; }

07/05/2021, 18h47
onclepaulie

Bonjour Nosmoking et merci beaucoup pour ta réponse.
Je teste cela et reviens te dire si c'est la solution que j'ai adoptée. Bon weekend !
08/05/2021, 11h44
NoSmoking

Je rajoutes que si tu veux cibler une cellule en particulier tu peux écrire :

Code:

const text = tr.cells[0].textContent; // lecture du contenu de la 1st cellule

à la place de :

Code:

const text = tr.textContent; // lecture du contenu brut de la ligne compléte

Bonjour,

Je ne sais pas ce que je fais de mal. J'ai ajouté à la fin du body ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
// récup. <table> à traiter
const oTable = document.querySelector(".xcrud-list");
// récup. des lignes de celle-ci
const oRows = oTable.rows;
// le terme à trouver
const search = "47";
// la boucle de recherche
for (let tr of oRows) {
  const text = tr.textContent;      // lecture du contenu brut
  if (text.includes(search)) {      // occurrence trouvé
    tr.classList.add("rouge");     // on ajoute la classe à la <tr>
  }
 
 
</script>

et dans mon css :

Code:

1
2
3
.rouge{
  background-color: red !important;
}

Rien n'y fait. J'ai aussi mis les balises <script> </script> sans le text/javascript.

10/05/2021, 17h50
NoSmoking

Les raisons peuvent être nombreuse mais si tu as respecté l'existence des éléments alors il se peut que tu sois en face d'un soucis avec l'application du CSS.

Si tes <td> ont une backckground-color en affecter une aux <tr> ne changera rien. C'est donc une chose à regarder.

En faisant un test du script sur un tableau bateau, je n'arrive pas non plus à faire fonctionner le code.
Voici mon code entier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE HTML>
 
<html>
<head>
<meta charset="UTF-8">
 <style type="text/css">
 
 
 table{
  border-collapse:collapse;
 }
 
 td{
 border:1px solid #ccc;
 width:10%;
 height:5rem;
 
 }
 
 .rouge{
 
 
 background:red;
 
 }
 
 </style>
 
 
 
 
</head>
 
<body>
<table id="tableau" class="table">
<tbody><tr ><td>Nom</td>
<td>Prénom</td>
<td>Age</td>
<td>Test</td>
</tr>
<tr><td>Snoop</td>
<td>Dogg</td>
<td>50</td>
<td>Test</td>
</tr>
<tr><td>Tupac</td>
<td>Shakur</td>
<td>47</td>
<td>Test</td>
</tr>
<tr><td>Notorious</td>
<td>BIG</td>
<td>48</td>
<td>Test</td>
</tr>
<tr><td>Tupac</td>
<td>Shakur</td>
<td>47</td>
<td>Test</td>
</tr>
</tbody>
</table>
 
 <script type="text/javascript">
// récup. <table> à traiter
const oTable = document.querySelector("#tableau");
// récup. des lignes de celle-ci
const oRows = oTable.rows;
// le terme à trouver
const search = "47";
// la boucle de recherche
for (let tr of oRows) {
  const text = tr.textContent;      // lecture du contenu brut
  if (text.includes(search)) {      // occurrence trouvé
    tr.classList.add("rouge");     // on ajoute la classe à la <tr>
  }
 
 
</script>
 
 
</body>
 
</html>

Attention !
Il te manque une accolade fermante ligne 77 :

Code:

1
2
3
4
5
6
for (let tr of oRows) {
  const text = tr.textContent;      // lecture du contenu brut
  if (text.includes(search)) {      // occurrence trouvé
    tr.classList.add("rouge");     // on ajoute la classe à la <tr>
  }
} // <= manque accolade

11/05/2021, 13h34
onclepaulie

Merci beaucoup ! Cela fonctionne parfaitement :D:D:D:D

Nom	Prénom	Age	Test
Snoop	Dogg	50	Test
Tupac	Shakur	47	Test
Notorious	BIG	48	Test
Tupac	Shakur	47	Test