Как заполнить HTML таблицу с помощью JS?

Question

Есть диапазон от 27 до 1 нужно этими значениями заполнить таблицу в 10 колонок (3 колонки - величина динамическая и я понимаю, что ее можно посчитать через вычисление остатка от деления, с этим проблем нет)

<table>
    <script>
        let i_max = 27
        for (x=0; x<3; x++) {
            document.write('<tr>')
            for (i = i_max; i > 10; i--) {
                document.write('<td>' + i + '</td>');
            }
            document.write('</tr>');
        }



    </script>
</table>

Но проблема в том, что мой код начинает каждую строку таблицы со значения 27.

в идеале, хотелось бы получить "сквозное" заполнение: т.е. в первой строке получить заполненные ячейки значениями 27-18, во второй - 17-8, в третьей - остаток, начиная с первого столбца. Пустые ячейки оставить незаполненными. Заранее спасибо.

Answer 1

>> learn.javascript.ru/

Можно конечно вычислять и циклом. Но если написать такой код, а через пару месяцев вернуться к нему, возникнет вопрос, что здесь вообще происходит!)

let table = document.getElementById('my-table');

let html = "";
for (let i = 3; i > 0; i--) {
  let tds = "";
  for(let j = 0; j < 10; j++) {
    let val = i * 10 - j - 3;
    tds += "<td>" + (val > 0 ? val : "") + "</td>"
  }
  
  html += "<tr>" + tds + "</tr>";
}

table.innerHTML = html;

td { border: 1px solid #999; padding: 4px; }

<table id="my-table"></table>

Поэтому можно не стесняться вводить дополнительный счетчик, отдельно для заполнения:

createTableBody();
tableFill();

function createTableBody() {
  let rows = 3;
  let cells = 10;
  
  let table = document.getElementById('my-table');  
  table.innerHTML = ("<tr>" + "<td></td>".repeat(cells) + "</tr>").repeat(rows);
};

function tableFill() {
  let fillFrom = 27;  
  let td = document.querySelectorAll('#my-table td');
  
  for( let i = 0; i < td.length; i++ ) {
    td[i].textContent = fillFrom--;
    if( fillFrom < 1 ) break;
  }
}

td {
  border: 1px solid #999;
  padding: 4px;
}

<table id="my-table"></table>

БЛОГ НА HUSL

Как заполнить HTML таблицу с помощью JS?

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