Javascript: Cor até mesmo linhas e até mesmo células de uma tabela criada dentro de uma função

votos
0

tendo um pouco de um problema com a minha função JS no momento.

Essencialmente, o objetivo do jogo aqui é obter a configuração do código de maneira tal que apenas em linhas mesmo e células até mesmo, será que os círculos da tabela ser de cor amarela, enquanto o restante permanece verde.

Eu tê-lo mostrando como esta no momento:

Como ele mostra ao visualizar o arquivo HTML

Os quadrados vermelhos ao redor dos círculos indicam as linhas mesmo / mesmo células que precisam ser coloridas em amarelo em vez de verde.

Aqui está o meu código:

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

Minha função é criar a tabela da rede o usuário seleciona, mas não estou certo como abordar o JS necessário para colorir as células necessárias como mencionado acima.

Qualquer conselho seria apreciado, ou por favor deixe-me saber se eu não tiver sido suficiente claro!

Publicado 13/01/2020 em 23:53
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

Usando seletores CSS aninhados você pode colorir as células que são ao mesmo tempo em filas até mesmo e até mesmo colunas.

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

A regra CSS acima corresponde a todos os elementos td que são uma criança, mesmo de seu tr pai que é em si uma criança, mesmo de sua tabela pai.

Respondeu 14/01/2020 em 00:05
fonte usuário

votos
0

Aqui é o que parece quando se utiliza td: nth-child (mesmo)

td: nth-child (mesmo)

Aqui é o que parece quando se utiliza tr: nth-child (mesmo)

tr: nth-child (mesmo)

Aqui está como ele olha usando um seletor CSS aninhada

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

Como podemos ver a partir da última imagem, os círculos destacadas em uma caixa negra são os únicos meios que devem ser coloridas vermelho (ou amarelo). Mas ele fica um pouco descolada e olhando com o seletor CSS aninhada.

Respondeu 14/01/2020 em 00:08
fonte usuário

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