Javascript: couleur même des lignes et des cellules même d'une table créée dans une fonction

voix
0

ayant un peu d'un problème avec ma fonction JS au moment.

Essentiellement, le but du jeu ici est d'obtenir la configuration du code de telle sorte où que même sur des lignes et des cellules même, seront de couleur jaune les cercles de la table, tandis que le reste reste vert.

Je l'ai montrer comme ça au moment:

Comment ça montre lors de la prévisualisation du fichier HTML

Les carrés rouges autour des cercles indiquent les lignes paires / même des cellules qui doivent être colorés en jaune au lieu de vert.

Voici mon code:

    <!DOCTYPE html>
<html lang=en dir=ltr>
  <head>
    <style>
      body {
        background-color: linen;
      }
      td {
        height: 75px;
        width: 75px;
        background-color: green;
        border-radius: 50%;
        display: inline-block;
      }

    </style>
    <meta charset=utf-8>
    <title></title>
    <script type=text/javascript>

      function validation(){
        var userSubmit = document.getElementById('size').value; //takes the users input and stores it within the variable userSubmit.
        var num_rows = userSubmit; //assigning the users input to the number of rows.
        var num_cols = userSubmit; //assigning the users input to the number of colums.
        var tableBody = ; //empty string setup for the table.

        for (var r=0; r<num_rows; r++){
          tableBody += <tr>; //for loop going through the number of rows required to complete the table.
            for (var c=0; c<num_cols; c++){
              tableBody += <td> + c + </td>;//for loop, within the rows for loop, this is to determine the number of columns required in the table
            }
            tableBody += </tr>;
        }
        document.getElementById('wrapper').innerHTML = (<table> + tableBody + </table>);
      }

    </script>
  </head>
  <body>
    <form name=form1>
      <select id=size>
      <option value=3>3x3</option>
      <option value=5>5x5</option>
      <option value=7>7x7</option>
      </select>
    </form>
    <button type=submit onclick=validation()>Generate Graph</button>

    <div id=wrapper></div>
  </body>
</html>

Ma fonction crée la table de la grille l'utilisateur sélectionne, mais je ne suis pas sûr comment aborder la JS nécessaire pour colorer les cellules requises comme mentionné ci-dessus.

Tout conseil serait apprécié, ou s'il vous plaît laissez-moi savoir si je ne l'ai pas été assez clair!

Créé 13/01/2020 à 23:53
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

En utilisant les sélecteurs CSS imbriqués vous pouvez colorer les cellules qui sont à la fois sur les lignes et les colonnes même même.

tr:nth-child(even) td:nth-child(even) {
  background-color: red;
}

La règle CSS ci-dessus correspond à tous les éléments td qui sont un enfant, même de leur tr mère qui est lui-même un enfant, même de sa table parent.

Créé 14/01/2020 à 00:05
source utilisateur

voix
0

Voici à quoi il ressemble lorsque vous utilisez td: nième enfant (même)

td: nième enfant (même)

Voici à quoi il ressemble lorsque vous utilisez tr: nième enfant (même)

tr: nième enfant (même)

Voici à quoi il ressemble à l'aide d'un sélecteur CSS imbriqué

tr: nième enfant (même), td: nième enfant (même)

Comme on peut le voir sur la dernière image, les cercles mis en évidence dans une boîte noire sont les seuls cercles qui doivent être de couleur rouge (ou jaune). Mais il y a un peu funky avec le sélecteur CSS imbriqué.

Créé 14/01/2020 à 00:08
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more