помогите разобраться как сделать java script, картинку предоставила как должно получиться, код что написала ниже

Question

let table = document.querySelector('#table');
let k = 2;
for (let i = 1; i < 10; i++) {
  let tr = document.createElement('tr');
  for (let i = 1; i < 10; i++) {
    let td = document.createElement('td');
    td.innerHTML = k;
    k++;
    tr.appendChild(td);
  }
  table.appendChild(tr);
}

table td {
  padding: 10px;
  border: 5px groove white;
  position: relative;
  left: 400px;
}

<table id="table">
</table>

Answer 1

Разметку Вы сделали почти правильно, только k увеличиваете не в том цикле. И в ячейку таблицы нужно передавать не k, а счетчик второго цикла. Ну и сам второй цикл должен отталкиваться от текущего состояния k

let table = document.querySelector('#table');
let k = 2; 
for (let i = 1; i < 10; i++) {
  let tr = document.createElement('tr');
  for (let j = k; j < k+9; j++) {
      let td = document.createElement('td');
      td.innerHTML = j; 
      tr.appendChild(td);
  }
  k++; 
 table.appendChild(tr);
}

Что бы раскрасить ячейки я предлагаю в цикл который отрисовует ряд добавить переменную, которая при каждом новом ряде будет равна 2, а увеличивать её во втором цикле. Таким образом мы добъемся что на каждом ряду эта переменная будет одинакова для определенных ячеек, потом останется только через switch их соответствующим образом раскрасить:

let table = document.querySelector('#table');
let k = 2; 
for (let i = 1; i < 10; i++) {
  let tr = document.createElement('tr');
  let num = 2;
  for (let j = k; j < k+9; j++) {
      let td = document.createElement('td');
      td.innerHTML = j; 
      tr.appendChild(td);
      switch(num){
        case 2: td.style.backgroundColor = 'blue'; break;
        case 3: td.style.backgroundColor = 'yellow'; break;
        case 4: td.style.backgroundColor = 'red'; break;
        case 5: td.style.backgroundColor = 'blue'; break;
        case 6: td.style.backgroundColor = 'yellow'; break;
        case 7: td.style.backgroundColor = 'red'; break;
        case 8: td.style.backgroundColor = 'blue'; break;
        case 9: td.style.backgroundColor = 'yellow'; break;
        case 10: td.style.backgroundColor = 'red'; break;
      }
      num++;
  }
  k++; 
 table.appendChild(tr);
}

Answer 2

не совпадают значения с таблицей в задании. Если приглядеться, станет видно, что значения в ячейках соответствуют простой сумме индексов ячеек, например, ячейка в первом столбце и первой строке имеет значение 2, ячейка в третьем столбце и первой строке имеет значение 4, и т.д.
Исходя из этого не нужна отдельная переменная k, для хранения значения, достаточно сохранять i+j - где i,j соответственно индексы в строке и колонке.
Не соответствует цвет колонок. Для установки цвета достаточно установить background-color, сделать это можно как с помощью объекта style, так и с помощью css-классов.

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

Исходя из этого можно получить данный остаток можно получить с помощью специального оператора % и проверить его с помощью switch

Например:

let table = document.querySelector('#table');

for (let i = 1; i < 10; i++) {
  let tr = document.createElement('tr');
  for (let j = 1; j < 10; j++) {
    let td = document.createElement('td');

    td.innerHTML = i + j;
    tr.appendChild(td);

    switch (j % 3) {
      case 0:
        td.style.backgroundColor = 'red';
        break;
      case 1:
        td.style.backgroundColor = 'blue';
        break;
      case 2:
        td.style.backgroundColor = 'yellow';
        break;
    }
  }
  table.appendChild(tr);
}

table td {
  padding: 8px;
  border: 5px groove white;
  position: relative;
}

<table id="table">
</table>

БЛОГ НА HUSL

помогите разобраться как сделать java script, картинку предоставила как должно получиться, код что написала ниже

Ответы (2 шт):