如何使用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 -loop連接字符串：

    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]實現什么。