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>

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

Answer 1

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

无论如何，就实施您的要求而言，我建议通过在之外添加第一个<tr>和最终</tr>标记来使其更简单一些循环，因为那时你只需要一个if语句：

＆＃13;
＆＃13;
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>";
＆＃13;
＆＃13;
＆＃13;

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

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

2 个答案: