Javascript: Szín még sorok, sőt sejtek egy tábla legújabb függvényében

szavazat
0

amelyek egy kis probléma az én JS függvény abban a pillanatban.

Lényegében a cél a játék az, hogy a kódot a telepítést olyan módon, ahol csak a páros sorok, sőt sejtek, majd a köröket a táblázatból is sárga színű, míg a többi zöld marad.

Megvan mutatja, mint ez a pillanat:

Hogyan jelenik meg, ha kipróbálná az HTML fájlt

A piros négyzet körül körök jelzik, hogy még sorok / akár sejtek, amelyeket meg kell színes sárga zöld helyett.

Itt van a kód:

    <!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>

Saját függvény hozza létre a táblát a rács a felhasználó kiválasztja, de nem vagyok biztos abban, hogyan kell megközelíteni a JS szükséges színezni a sejtek szükség, mivel a fent említett.

Minden tanácsot szívesen vennénk, vagy kérem tudassa velem, ha nem voltam elég világos!

A kérdést 13/01/2020 23:53
a forrás felhasználó
Más nyelveken...                            


2 válasz

szavazat
1

Használata beágyazott CSS választók akkor színezni a sejteket, amelyek mind a páros sorok és oszlopok még.

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

A fenti CSS szabály egyezik minden td elemek vannak, amelyek még a gyermek a szülő tr ami maga is egy még gyermek a szülő tábla.

Válaszolt 14/01/2020 00:05
a forrás felhasználó

szavazat
0

Itt van, hogyan néz ki, ha a td: n-ed gyermek (még)

td: n-ed gyermek (még)

Itt van, hogyan néz ki, ha a tr: n-ed gyermek (még)

tr: n-ed gyermek (még)

Itt van, hogyan néz ki egy beágyazott CSS választó

tr: n-ed gyermek (igaz), td: n-ed gyermek (még)

Amint látjuk, az utolsó kép, a körök kiemelt fekete doboz az egyetlen körökben, hogy kell piros színű (vagy sárga). De lesz egy kicsit funky keres a beágyazott CSS-választó.

Válaszolt 14/01/2020 00:08
a forrás felhasználó

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