Javascript: Цвет даже строки и даже клетки таблицы, созданные в функции

голоса
0

имея немного вопроса с моей функцией JS в данный момент.

По существу, цель игры здесь, чтобы получить установку коды таким образом, где только на четных рядах и даже клетку, будут круги из таблицы желтого цвета, в то время как остальные остаются зелеными.

У меня есть это показывает, как это на данный момент:

Как показывает при просмотре файла HTML

Красные квадраты вокруг кругов указывают на четных строк / даже клетки которые должны быть окрашены в желтый цвет вместо зеленого.

Вот мой код:

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

Моя функция создает таблицу из сетки пользователь выбирает, но я не уверен в том, как подойти к JS требуется окрашивать клетки, необходимые, как указано выше.

Любые советы будут оценены, или, пожалуйста, дайте мне знать, если у меня не было достаточно ясно!

Задан 13/01/2020 в 23:53
источник пользователем
На других языках...                            


2 ответов

голоса
1

Использование вложенных CSS селекторов вы можете окрашивать клетки, как на четных строк и четных столбцов.

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

Приведенное выше правило CSS соответствует всем элементам TD, которые еще ребенок своего родительского тра, который сам по себе является еще ребенком родительской таблицы.

Ответил 14/01/2020 в 00:05
источник пользователем

голоса
0

Вот как это выглядит при использовании тд: п-й ребенок (даже)

тд: п-й ребенок (даже)

Вот как это выглядит при использовании тра: п-й ребенок (даже)

тр: п-й ребенок (даже)

Вот как это выглядит с помощью вложенного селектора CSS

тр: п-й ребенок (даже), тд: п-й ребенок (даже)

Как видно из последнего изображения, круги выделены в черном ящике являются единственными круги, которые должны быть красного цвета (или желтый). Но это становится немного фанки глядя с вложенной селектор CSS.

Ответил 14/01/2020 в 00:08
источник пользователем

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