0
votes

Case à cocher active modifie la couleur de fond de tableau sauf pour une cellule

Lorsque la case à cocher est inactive, la table ne change pas, une fois la case à cocher cliquée, toutes les cellules de fond de fond devient jaune sauf pour le milieu qui devient rouge. C'est le résultat que je dois atteindre

<!DOCTYPE html>
<html lang="it" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Check6</title>
  </head>
  <body>
    <label for="checkbox_id">CLICCA</label>
    <input type="checkbox" id="checkbox_id">
    <table class="tg">
<thead>
  <tr>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0lax"></td>
    <td id="red"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
</tbody>
</table>
  </body>
</html>

html css checkbox

0 commentaires

3 Réponses :

1
votes

Ajoutez le code suivant à votre CSS:

<!DOCTYPE html>
<html lang="it" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Check6</title>
</head>

<body>
  <label for="checkbox_id">CLICCA</label>
  <input type="checkbox" id="checkbox_id">
  <table class="tg">
    <thead>
      <tr>
        <th class="tg-0lax"></th>
        <th class="tg-0lax"></th>
        <th class="tg-0lax"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="tg-0lax"></td>
        <td id="red"></td>
        <td class="tg-0lax"></td>
      </tr>
      <tr>
        <td class="tg-0lax"></td>
        <td class="tg-0lax"></td>
        <td class="tg-0lax"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

0 commentaires

0
votes

Vous devez simplement créer une fonction qui obtient si la case à cocher est cochée et donnez l'identifiant "rouge" une couleur

<!DOCTYPE html>
<html lang="it" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Check6</title>
  </head>
  <body>
    <label for="checkbox_id">CLICCA</label>
    <input type="checkbox" id="checkbox_id" onClick="myFunction()">
    <table class="tg">
<thead>
  <tr>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0lax"></td>
    <td id="red"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
</tbody>
</table>
  </body>
</html>

1 commentaires

Ou vous pouvez simplement utiliser CSS comme M.Run_Script vous a montré

0
votes

Si votre table est toujours la même structure HTML, vous pouvez sélectionner via: Nth-enfant () n'importe quel élément à l'intérieur de l'arborescence HTML.

Par exemple: #checkbox_id: coché + table TRDY TR: enfant (1) TD: Nth-enfant (2) code> p>

p>



<!DOCTYPE html>
<html lang="it" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Check6</title>
  </head>
  <body>
    <label for="checkbox_id">CLICCA</label>
    <input type="checkbox" id="checkbox_id">
    <table class="tg">
<thead>
  <tr>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0lax"></td>
    <td id="red"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
</tbody>
</table>
  </body>
</html>

0 commentaires