javascript - 如何使用 Javascript 在 HTML 表格中动态生成列

Question

<script>

   function generateCaseDetails(array, n)
   {
     row = '';

     for( i = 0;i<array.length;i=i+n)
     {
        row+=
        '<tr class = "'+(i%2==0 ? 'even' : '')+'">'+
         for(j = 0; j < n ; ++j)
         {
            '<td><label>'+array[i+j].label+'</label><div>'+array[i+j].value+'</div></td>'+

         }
        '</tr>'
     }

     document.write(row);
   }

   a = 12.5;
   b = 0.3;
   c = 3.4;
   d = 1.2;

   caseDetails = [
     {"label":"30 day exception ratio", "value":a},
     {"label":"30 day exception turn ratio", "value":b},
     {"label":"60 day exception ratio", "value":c},
     {"label":"60 day exception turn ratio", "value":d}
   ]

  generateCaseDetails(caseDetails, 2);
</script>

我正在尝试使用上述方法在表中动态创建行和列。它仅适用于外循环，即保持列固定。我想要没有。根据函数参数中传递的值动态决定列的数量。不知何故，内部循环不起作用。

我犯了语法错误吗？

提前致谢!

编辑

预期输出:

 30 day exception ratio  30 day exception turn ratio  
 12.5                    0.3   
 60 day exception ratio  60 day exception turn ratio  
 3.4                     1.2

Answer 1

您正在尝试将字符串与 for 连接起来-循环:

    row+=
    '<tr class = "'+(i%2==0 ? 'even' : '')+'">'+
     for(j = 0; j < n ; ++j)

这不起作用，您的 JavaScript 控制台应该给您一条合理的错误消息。

只需以 ; 结束第一行-终止符并在内部循环中的字符串前面加上 row += 。再次以 ; 结尾而不是 + .

当然是孤独的</tr>最后需要前面的row += ，也是。

你的内部循环应该是这样的:

    row += '<tr class = "'+(i%2==0 ? 'even' : '')+'">';
     for(j = 0; j < n ; ++j)
     {
        row += '<td><label>'+array[i+j].label+'</label><div>'+array[i+j].value+'</div></td>';

     }
    row += '</tr>';

尽管如此，我不明白你想通过 array[i+j] 实现什么目的？ .