How to generate columns dynamically in HTML table using 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>

I'm trying to create rows and columns dynamically in a table using above method. It works only with the outer loop, i.e. keeping the columns fixed. I want the no. of columns to be dynamically decided based on the value passed in the parameter of the function. Somehow the inner loop is not working.

Am I doing a syntactical mistake ?

Thanks in advance!

EDIT

Expected output:

 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

@omeinusch, I want the succeeding item in the array to be printed using array[i+j]. — Abhishek Singh
– Abhishek Singh, Commented Mar 13, 2016 at 15:27

tjati · Accepted Answer · 2016-03-13 15:20:59Z

1

You are trying to concanate a string with a for-loop:

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

This cannot work and your javascript console should give you a reasonable error message.

Just end the first line with the ;-terminator and prepend the string in the inner loop with row +=. Again, end with the ; instead of the +.

Of course, the lone </tr> at the end need the preceeding row +=, too.

Your inner loop should look like:

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

Nevertheless, I don't understand what do you want to achieve with array[i+j].

answered Mar 13, 2016 at 15:20

tjati

6,1166 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Singh Over a year ago

Thanks @omeinusch for the quick reply. But this too is not working.

tjati Over a year ago

It's a step forward. Please add your expected output in your question as mentioned in my comment above.

Collectives™ on Stack Overflow

How to generate columns dynamically in HTML table using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related