0

Есть диапазон от 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, в третьей - остаток, начиная с первого столбца. Пустые ячейки оставить незаполненными. Заранее спасибо.

1 ответ 1

4

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

2
  • Когда увидел вопрос, в голове возникло решение до последней запятой совпадающее с вашим. Чётко и понятно.
    – UModeL
    26 мая 2020 в 4:19
  • Спасибо большое. Немного потыкался, как адаптировать, но все оч круто написано и быстро разобрался. Спасибо за помощь 26 мая 2020 в 6:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.