Discussion :

[Pittouti]

Bonjour,

Pour commencer : je suis novice sur CSS

en fait, j'ai ce tableau :



je voudrai bien : Quant la première colonne (Erreur)=ERREUR, la ligne complète soit en rouge.

Merci d'avance.

[NoSmoking]

Bonjour,
comment est réalisé ton tableau ?

[Pittouti]

c'est un widget ( Table ) qui a ce code

Code JSON :

Sélectionner tout - Visualiser dans une fenêtre à part

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
{
  "clickEvents": [],
  "columnData": "{{q_FR}}",
  "columnOptions": {
    "Erreur": {
      "width": 103
    },
    "LIvraison": {
      "width": 100
    },
    "Créé_par": {
      "width": 100
    },
    "Créé_le": {
      "width": 100
    },
    "DtePlanMS": {
      "width": 100
    },
    "Article": {
      "width": 150
    },
    "Designation": {
      "width": 250
    },
    "Division": {
      "width": 100
    },
    "Magasin": {
      "width": 100
    },
    "Code_USM": {
      "width": 100
    },
    "Type_MDU": {
      "width": 100
    },
    "Pack_Instruction": {
      "width": 300
    },
    "Avis": {
      "width": 100
    },
    "Ordre": {
      "width": 100
    },
    "Designation_Article": {
      "width": 300
    },
    "CA_Code": {
      "width": 100
    },
    "Type_de_fabrication": {
      "width": 100,
      "name": "Type.Fab"
    },
    "MSN": {
      "width": 100
    },
    "PP_Station": {
      "width": 100
    },
    "Critère_de_tri": {
      "width": 100,
      "name": "Crit.Tri"
    },
    "AODS": {
      "width": 150
    },
    "AOCI": {
      "width": 150
    },
    "Requirement_date": {
      "width": 100,
      "name": "Req. Date"
    }
  },
  "columnOrder": [
    "Erreur",
    "LIvraison",
    "Créé_par",
    "Créé_le",
    "DtePlanMS",
    "Article",
    "Designation",
    "Division",
    "Magasin",
    "Code_USM",
    "Type_MDU",
    "Pack_Instruction",
    "Avis",
    "Ordre",
    "Designation_Article",
    "CA_Code",
    "Type_de_fabrication",
    "MSN",
    "PP_Station",
    "Critère_de_tri",
    "AODS",
    "AOCI",
    "Requirement_date"
  ],
  "gridOptions": {
    "pagingOptions": {
      "currentOffset": 0,
      "pageSize": 20
    }
  },
  "selectedRowKeys": [],
  "serverEnabled": false,
  "tooltipsEnabled": false,
  "sl": {
    "cssClasses": ""
  }
}

[NoSmoking]

De ce que je comprend tu fournis les datas et ton widget les met en forme dans une <table>.

En CSS pur il n'y a pas moyen, à l'heure actuelle, de remonter l'arbre HTML il te faudra donc utiliser JavaScript pour cibler les td:first-child et mettre le background de la <tr> parent en couleur.

Tu dois pouvoir faire quelque chose comme

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const elements = document.querySelectorAll("td:first-child");
elements.forEach((el) => {
  el.parentNode.style.backgroundColor = el.textContent ? "#F00" : "";
});

ou mieux peut-être, gérer cela avec une classe.