Как залить ячейки по диагонали с помощью JS

Question

Я создал матрицу в виде таблицы следующего типа: первая ячейка в первой строке содержит значение «1», а каждая следующая ячейка больше на «1»; первая ячейка второй строки содержит значение «2» и так далее...

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

У меня получилось закрасить другую диагональ с помощью цикла for, но нужно залить именно обратную диагональ таблицы (как на изображении). Вот мой код https://jsfiddle.net/nghr2z3o/

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

for (let i = 0; i < 5; i++) {
    let newTr = document.createElement('tr');
    table.append(newTr);
    for (let j = 1; j <= 5; j++) {
        let newTd = document.createElement('td');
        newTd.innerText = `${j + i}`;
        newTr.append(newTd);
    }
}

let allTr = document.querySelectorAll('tr');

for (let i = 0; i < allTr.length; i++) {
    allTr[i].children[i].style.background = 'red';
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table id="matrix">
    <style>
      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    </table>


  <script src="script.js"></script>
</body>

</html>

Answer 1

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

for (let i = 0; i < 5; i++) {
    let newTr = document.createElement('tr');
    table.append(newTr);
    for (let j = 1; j <= 5; j++) {
        let newTd = document.createElement('td');
        newTd.innerText = `${j + i}`;
        newTr.append(newTd);
    }
}

let allTr = document.querySelectorAll('tr');

for (let i = 0; i < allTr.length; i++) {
    allTr[allTr.length - i - 1].children[i].style.background = 'red';
        //^^^^^^^^^^^^^^^^^^^^//
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table id="matrix">
    <style>
      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    </table>


  <script src="script.js"></script>
</body>

</html>

Answer 2

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

for (let i = 0; i < 5; i++) {
    let newTr = document.createElement('tr');
    table.append(newTr);
    for (let j = 1; j <= 5; j++) {
        let newTd = document.createElement('td');
        newTd.innerText = `${j + i}`;
        newTr.append(newTd);
    }
}

let allTr = document.querySelectorAll('tr');

for (let i = 0; i < allTr.length; i++) {    
    allTr[i].children[allTr[i].childElementCount - i -1].style.background = 'red';
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table id="matrix">
    <style>
      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    </table>


  <script src="script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как залить ячейки по диагонали с помощью JS

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