Блог

Главная - Вопросы по программированию - Разрыв строки после каждого 10-го td внутри цикла for JavaScript

Разрыв строки после каждого 10-го td внутри цикла for JavaScript

#javascript #loops #for-loop

#javascript #циклы #for-цикл

Вопрос:

Я хочу прерывать строку после каждого 10-го элемента в массиве. Как мне создать его внутри текущего цикла for?

 function printa() {
    document.write('<table>');
    document.write('<tr>');
    for (var i = 0; i < numbers.length; i  ) {
        document.write("<td>"   numbers[i]   "</td>");
    }
    document.write('<tr>');
    document.write('</table>');
}

Ниже показан вывод:
введите описание изображения здесь

Результат, который я хочу:

введите описание изображения здесь

Комментарии:

1. Это привело бы к недопустимой разметке, br непосредственно внутри tr не допускается.

2. Хорошо. Можете ли вы подсказать мне другой способ сделать это?

3. @AraMalki каков ваш ожидаемый результат?

4. Похоже, вы хотите создать таблицу? С несколькими строками?

5. Почему бы вам просто не поместить 10 ячеек в строку (tr), а следующие 10 — в другую строку?

Ответ №1:

 function genTable(values, rowLength = 10) {
  let content = ''

  for(let i = 0; i < values.length; i  = rowLength) {
    const tds = values.slice(i, i   rowLength).map(value => `<td>${value}</td>`)
    content  = `<tr>${tds.join("")}</tr>`
  }

  return `<table>${content}</table>`
}

const numbers = new Array(30).fill().map((_,i) => i 1)
const table = genTable(numbers)

console.log(table)
document.write(table);

Ответ №2:

Вы можете добавить if, который проверяет нужные вам условия. Вам не следует использовать document.write .. 

 function printa() {
    document.write('<table>');
    document.write('<tr>');
    for (var i = 0; i < numbers.length; i  ) {
        if (i != 0 amp;amp; i % 10 == 0 amp;amp; i != numbers.length-1) {
            document.write('</tr>');
            document.write('<tr>');
        }
        document.write("<td>"   numbers[i]   "</td>");
    }
    document.write('</tr>');
    document.write('</table>');
}

Комментарии:

1. Большое вам спасибо. Это решило проблему. Большая любовь.

Ответ №3:

 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

function tableCreate() {
  var body = document.getElementById('myTable');
  var tbl = document.createElement('table');
  tbl.style.width = '100%';
  tbl.setAttribute('border', '1');
  var trNum = Math.ceil(arr.length / 10);

  var arrNum = 0;
  for (i = 0; i < trNum; i  ) {
    var tr = document.createElement('tr');
    for (j = 0; j < 10; j  ) {
      var td = document.createElement('td');
      td.appendChild(document.createTextNode(arr[arrNum]))
      tr.appendChild(td)
      arrNum  ;
    }
    tbl.appendChild(tr)
    console.log(trNum,i);
  }
  body.appendChild(tbl)
}
tableCreate();  
 <div id="myTable"></div>

Ответ №4:

Мы можем преобразовать данные в простой 2d-массив, чтобы использовать логику, которую вы используете, как показано ниже,

 function printa(numbers) {
    document.write('<table>');
    for (var i = 0; i < numbers.length; i  ) {
    document.write('<tr>');
    numbers2 = numbers[i]
    for (var j = 0; j < numbers2.length; j  ) {
        document.write("<td>"   numbers2[j]   "</td>");
    }

    document.write('</tr>');
    }
    document.write('</table>');
}

 printa([[1,2,3,4,5,6,22,3,45,23],[34,45,5677,12,34,23,11,22,67,23],[657,765,657,567,567,56,2,6,66,78]])