Как динамически генерировать столбцы в таблице HTML, используя Javascript

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> 

Я пытаюсь динамически создавать строки и столбцы в таблице, используя вышеописанный метод. Он работает только с внешним контуром, т. Е. Фиксирует столбцы. Я хочу, чтобы нет. столбцов, которые будут динамически решаться на основе значения, переданного в параметре функции. Каким-то образом внутренний цикл не работает.

Я делаю синтаксическую ошибку?

Заранее благодарен!

EDIT

Ожидаемый результат:

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

Вы пытаетесь concanate строку с for -loop:

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

Это не может работать и вашей консоли JavaScript должен дать вам разумное сообщение об ошибке.

Просто оканчивайтесь первой строкой с помощью символа ; -terminator и добавьте строку во внутренний цикл с помощью 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].