Javascript: Kleur zelfs rijen en zelfs de cellen van een tabel gecreëerd binnen een functie

stemmen
0

met een beetje een probleem met mijn JS functie op dit moment.

In wezen het doel van het spel is hier om de code setup op een zodanige wijze, waar alleen nog rijen en zelfs cellen, zal de cirkels van de tafel geel gekleurd te krijgen, terwijl de rest groen blijven.

Ik heb het laten zien als dit op het moment:

Hoe het laat zien wanneer het bekijken van de HTML-bestand

De rode vierkantjes rond de cirkels geven de even rijen / even cellen die behoefte in het geel in plaats van groen te kleuren.

Hier is mijn 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>

Mijn functie is het creëren van de tafel van het net de gebruiker selecteert, maar ik ben niet zeker hoe de aanpak van de JS die nodig is om de vereiste zoals hierboven vermeld cellen te kleuren.

Elk advies zou worden gewaardeerd, of laat het me weten als ik niet duidelijk genoeg zijn geweest!

De vraag is gesteld op 13/01/2020 om 23:53
bron van user
In andere talen...                            


2 antwoorden

stemmen
1

Met behulp van geneste CSS selectors kunt u de kleur van de cellen die beide op een even rijen en even kolommen.

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

De bovenstaande CSS-regel komt overeen met alle td elementen die een nog kind van hun ouders tr die zelf nog kind van de bovenliggende tabel zijn.

antwoordde op 14/01/2020 om 00:05
bron van user

stemmen
0

Hier is hoe het eruit ziet wanneer u td: n-kind (zelfs)

td: n-kind (zelfs)

Hier is hoe het eruit ziet wanneer u tr: nth-child (even)

tr: nth-child (even)

Hier is hoe het eruit ziet met behulp van een geneste CSS selector

tr: n-kind (zelfs), td: n-kind (zelfs)

Zoals we kunnen zien van het laatste beeld, de cirkels benadrukt in een black box zijn de enige cirkels die rood (of geel) moet worden gekleurd. Maar het wordt een beetje op zoek naar funky met de geneste CSS selector.

antwoordde op 14/01/2020 om 00:08
bron van user

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