将一个 table 行拆分为 5s 列的倍数

Question

假设我有一个包含 11 个元素的数组

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

我想根据上面的数组创建一个 HTML table，但想将该行分成 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>

注意最后一个 td 上没有封闭的 tr。

Answer 1

您没有显示您在 for 循环中使用的条件，因此无法确定您的代码出了什么问题。我猜想第二个 if 条件正在测试 cntr == sizeArr.length 不是一个好兆头，因为如果循环计数器等于数组的 .length 那意味着 "current" sizeArr[cntr] 处的元素是 undefined - 数组中的最后一个元素位于 length-1.

位置

无论如何，就实现您的要求而言，我的建议是通过添加第一个 <tr> 和最后一个 </tr> 标签 outside 循环，因为这样你只需要一个 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);

将一个 table 行拆分为 5s 列的倍数

Split one table row into multiples of 5s column

javascript

html

html-table

modulo

divide