CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32331

How to create table thead and tbody dynamically

I have the below JSON as response , i am trying to create a table from the loop 

{
    "columns": ["Country", "DateLastModified"],
    "data": [
        [
            ["IND"],
            ["22:03.4"]
        ],
        [
            ["US"],
            ["22:11.0"]
        ]
    ]
}

I have tried as shown below 

function formDataTable(response)
{
        // forming table header     
        var allcolumns = response.columns;
        var html = "<table><thead>"
        for (var i = 0; i < allcolumns.length; i++)
        {
                html += '<th>' + allcolumns[i] + '</th>';
        }
        html += "</thead></table>"
        $('#here_table').html(html);
        // forming table header ends 


        var alldata = response.data;
        var alldatahtml = '';
        for (var j = 0; j < alldata.length; j++)
        {
                alldatahtml += '<td>' + alldata[j] + '</td>';
        }
}

This is my fiddle https://jsfiddle.net/o2gxgz9r/9072/

Could you please let me know how to show the tbody also

Upvotes: 2

Views: 7106

Answers (4)

Nirav Joshi
Nirav Joshi

Reputation: 2960

$(document).ready(function() {
  
  var response = {
	"columns": ["Country", "DateLastModified"],
	"data": [
		[
			["IND"],
			["22:03.4"]
		],
		[
			["US"],
			["22:11.0"]
		]
	]
};

formDataTable(response);

function formDataTable(response)
{
    var allcolumns = response.columns;
    var $table = $('<table>');
    var $thead = $('<thead>').appendTo($table);
    $(allcolumns).each(function(i){
      
        var $th = $('<th>',{'html':allcolumns[i]}).appendTo($thead);
    });
    
    var allData = response.data;
    var $tbody = $('<tbody>').appendTo($table);
    $(allData).each(function(j){
      $tr = $('<tr>').appendTo($tbody);
      $(allData[j]).each(function(k){
         var $td = $('<td>',{'html':allData[j][k]}).appendTo($tr);
      });
    });
    $("#here_table").html($table);
}
  
  
  
});
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here_table"></div>

Here you can go with this code.. it might helps you :)

Update

Here you can use each loop for draw table dynamically.

it will rander data dynamically and will append in your html.

Upvotes: 3

Guillaume L.
Guillaume L.

Reputation: 61

Simply use JS ES6 Templates String and map

$('#here_table').html(`
    <table>
        <thead>
            ${response.columns.map(head => `<th>${head}</th>`).join('')}
        </thead>
        <tbody>
            ${response.data.map(line => `<tr>${line.map(el => `<td>${el}</td>`).join('')}</tr>`).join('')}
        </tbody>
  </table>
`)

Try it

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122006

You havent appended the body.

 $('#here_table table').append(alldatahtml);

And also you need 2 tds inside the loop.

for (var j = 0; j < alldata.length; j++)
        {
                alldatahtml += '<tr>';
                alldatahtml += '<td>' + alldata[j][0] + '</td>';
                alldatahtml += '<td>' + alldata[j][1] + '</td>';
                alldatahtml += '</tr>';
        }

https://jsfiddle.net/o2gxgz9r/9075/

Upvotes: 3

JYoThI
JYoThI

Reputation: 12085

use after() append after thead like this $('#here_table table thead').after(alldatahtml);

var alldata = response.data;
        var alldatahtml = '<tbody>';
        for (var j = 0; j < alldata.length; j++)
        {
                alldatahtml += '<tr><td>' + alldata[j][0] + '</td><td>' + alldata[j][1] + '</td></tr>';
        }

        alldatahtml+='</tbody>';

       $('#here_table table thead').after(alldatahtml);


$(document).ready(function() {
  
  var response = {
	"columns": ["Country", "DateLastModified"],
	"data": [
		[
			["IND"],
			["22:03.4"]
		],
		[
			["US"],
			["22:11.0"]
		]
	]
};

formDataTable(response);

function formDataTable(response)
{
        // forming table header 	
        var allcolumns = response.columns;
        var html = "<table><thead>"
        for (var i = 0; i < allcolumns.length; i++)
        {
                html += '<th>' + allcolumns[i] + '</th>';
        }
        html += "</thead></table>"
        $('#here_table').html(html);
        // forming table header ends 

        
        var alldata = response.data;
        var alldatahtml = '<tbody>';
        for (var j = 0; j < alldata.length; j++)
        {
                alldatahtml += '<tr><td>' + alldata[j][0] + '</td><td>' + alldata[j][1] + '</td></tr>';
        }
        
        alldatahtml+='</tbody>';
        
       $('#here_table table thead').after(alldatahtml);
}
  
  
  
});
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here_table"></div>

Upvotes: 1

Related Questions