Split одна строка таблицы в кратных 5s колонке

Question

Скажем, у меня есть массив с 11 элементами

var sizeArr = ['abc','bcd','cde','def','efg','fgh','ghi','hij'.'ijk','klm','lmn']; 

Я хотел создать таблицу HTML на основе массива выше, но хотел бы разделить строку на 5 столбцов. У меня есть код, который выглядит примерно так:

var cntr = 1; 
for (....) { 
    if (cntr == 1 || cntr % 6 == 0) { 
     html += "<tr>"; 
    } 

    html +="<td>.....</td>"; 

    if (cntr == sizeArr.length|| cntr % 5 == 0) { 
     html += "</tr>"; 
    } 
} 

Этот код работает нормально для первых 10 элементов. Выход будет аналогичен его:

<tr> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>10 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>12</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>10.5 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>6</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>11 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>6</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>11.5 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>12</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>12 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>4</p> 
    </td> 
</tr> 
<tr> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>13 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>4</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>14 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>6</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>8 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>8</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>8.5 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>8</p> 
    </td> 
    <td> 
     <p class='COLUMN-DATA-PADDING-TXT'>9 D(M) US</p> 
     <p class='COLUMN-DATA-PADDING-TXT'>6</p> 
    </td> 
</tr> 
<td> 
    <p class='COLUMN-DATA-PADDING-TXT'>9.5 D(M) US</p> 
    <p class='COLUMN-DATA-PADDING-TXT'>6</p> 
</td> 

Обратите внимание, что последний тд не имеет охватывающего tr на нем.

Answer 1

Вы не показываете, какое условие вы используете в своем цикле for, так что не стоит быть уверенным, что происходит с вашим кодом. Я бы предположил, что это не является хорошим признаком того, что второе условие if испытывает cntr == sizeArr.length, потому что если счетчик циклов равен .length, это означает, что «текущий» элемент в sizeArr[cntr] равен undefined - последний элемент в массиве находится в позиция length-1.

Во всяком случае, насколько реализации ваше требование, что я хотел бы предложить, это делает его немного проще, добавив первый <tr> и окончательный </tr> теги вне цикл, потому что тогда вам нужно только одно if заявление:

var sizeArr = ['abc','bcd','cde','def','efg','fgh','ghi','hij','ijk','klm','lmn']; 
 

 
var html = ""; 
 
var cols = 5; 
 
for (var i = 0; i < sizeArr.length; i++) { 
 
    if (i % cols === 0 && i > 0) { 
 
    html += "</tr><tr>"; 
 
    } 
 
    html += "<td>" + sizeArr[i] + "</td>"; 
 
} 
 
html = "<tr>" + html + "</tr>"; 
 
// do something with the html, e.g., for demo purposes: 
 
console.log(html); 
 
document.body.innerHTML = "<table>" + html + "</table>";

Answer 2

я бы, вероятно, сделать работу с Array.prototype.reduce(). Вы можете не использовать функции стрелок, но идея здесь. Однако вы можете проверить результаты на консоли, чтобы увидеть теги.

var sizeArr = ['abc','bcd','cde','def','efg','fgh','ghi','hij','ijk','klm','lmn'], 
 
    myTable = sizeArr.reduce((p,c,i,a) => { i%5 === 0 && (p+="<tr>"); 
 
              i%5 === 4 || i === a.length-1 ? p+= "<td>" + c + "</td></tr>" 
 
                      : p+= "<td>" + c + "</td>" 
 
              return p},""); 
 
    
 
document.write("<table>"+myTable+"</table>"); 
 
console.log(myTable);