Javascript: Barva dokonce řádky a dokonce buňky tabulky vytvořené v rámci funkce

hlasů
0

má trochu problém s mou funkcí v současné době JS.

V podstatě je cílem hry je zde získat nastavení kódu takovým způsobem, kdy jen na sudých řádků a dokonce buněk, budou kruhy z tabulky označeny žlutě, zatímco ostatní zůstávají zelené.

Mám to ukazovat takhle v současné době:

Jak se ukazuje při prohlížení souboru ve formátu HTML

Červené čtverečky kolem kruhy označují i ​​řádky / i buňky, které je třeba barevné žlutě místo zelené.

Zde je můj 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>

Moje funkce je vytvoření tabulky ze sítě uživatel vybere, ale já nejsem jistý, jak přistupovat k JS potřebný k obarvení buněk požadované jak je uvedeno výše.

Nějakou radu chtěl bych být ocenil, nebo dejte mi vědět, jestli jsem nebyl dostatečně jasné!

Položena 13/01/2020 v 23:53
zdroj uživatelem
V jiných jazycích...                            


2 odpovědí

hlasů
1

Používání vnořených CSS selektorů můžete barvu buňky, které jsou jak na sudých řádků a dokonce i sloupy.

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

Výše uvedené pravidlo CSS odpovídá všem td prvky, které ještě dítě své mateřské tr, který sám o sobě je ještě dítě své mateřské tabulky.

Odpovězeno 14/01/2020 v 00:05
zdroj uživatelem

hlasů
0

Zde je, jak to vypadá, když používáte TD: nth-child (i)

td: nth-child (i)

Zde je, jak to vypadá, když používáte TR: nth-child (i)

tr: nth-child (i)

Zde je, jak to vypadá s použitím vnořeného volič CSS

tr: nth-child (i), td: nth-child (i)

Jak můžeme vidět z posledního snímku, kruhy zvýrazněné černé skříňky jsou pouze kruhy, které by měly mít červenou barvu (nebo žlutá). Ale je to trochu funky hledá se vnořené selektoru CSS.

Odpovězeno 14/01/2020 v 00:08
zdroj uživatelem

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