creating a html table in javascript

Question

I want to create HTML table in java script. Inside a for loop I want to create a dynamic table which can be extended. This is how I am it using now:

function(json)
{         
  var content= $('#name1').html('').append('<td> Name: ' + json.name + '<td>');
  var content= $('#address1').html('').append('<td> address: ' + json.address + '<td>');
  var content= $('#age1').html('').append('<td> age: ' + json.age + '<td>');
  var content= $('#status1').html('').append('<td> status: ' + json.status + '<td>');
}

HTML file is

<table>
    <tr id="name1"></tr>
    <tr id="address1"></tr>
    <tr id="age1"></tr>
    <tr id="status1"></tr>
</table>

now it is just with hardcore values but I want it auto generated and insert more rows if neccessary...

your coding will not generate the rows but columns!!! What you want to generate for??? — Allen Chak, Apr 28 '14 at 10:11
sorry columns... i am trying to display some user details in html page.. some user had just those four fields so i created like that.name, address, age and status but some user has more. so i cant use same code. as i am a fresher to java script no idea how to do this in a loop and create a dynamically generating table and display data in that — sarath, Apr 28 '14 at 10:16
check this http://stackoverflow.com/questions/171027/add-table-row-in-jquery — Rishi Php, Apr 28 '14 at 10:18
did you mean that, number of table row will be same but columns may increase. Or both rows and columns may increase/ — Bhushan Kawadkar, Apr 28 '14 at 10:19

score 1 · Answer 1 · answered Apr 28 '14 at 10:24

remove id from tr. Because if you need multiple row then id will be duplicated which is not valid.

<table id="mytable">

</table>   

function(json)
{   
 for(i=0;i<json.length;i++){   
  var newRow=   $("<tr></tr>");
  newRow.append('<td> Name: ' + json[i].name + '<td>');
  newRow.append('<td> address: ' + json[i].address + '<td>');
  newRow.append('<td> age: ' + json[i].age + '<td>');
  newRow.append('<td> status: ' + json[i].status + '<td>');
  $("#mytable").append(newRow);
 }
}

score 0 · Answer 2 · edited Apr 28 '14 at 10:37

0

You can Use Append Method to create Rows in a table like

for(i=0;i<data.length;i++)
{
    $("YOUR_TABLE_ID").append("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['address']+"</td><td>"+data[i]['age']+"</td><td>"+data[i]['status']+"</td></tr>");
}

edited Apr 28 '14 at 10:37

Allen Chak

1,802
1
10
21

answered Apr 28 '14 at 10:16

Arunkumar

5,150
4
28
40

so in html file i will give just the table id? – sarath Apr 28 '14 at 10:25

score 0 · Answer 3 · answered Apr 28 '14 at 10:17

0

i think this will help you

function(json)
          {
            for(i=0;i<jsn.length;i++){
            $('#YOUR_TABLE_ID').append("<tr><td>"+ json.name+"</td></tr>")
            }
          }

answered Apr 28 '14 at 10:17

Gaurang s

831
6
18

json.lenght is not working.. when i alert the lenght of json is is showing undefined – sarath Apr 28 '14 at 10:40
change in for loop jsn to json – Gaurang s Apr 28 '14 at 11:03
i did that. but still json lenght is not getting . – sarath Apr 28 '14 at 11:09

score 0 · Answer 4 · answered Apr 28 '14 at 10:28

<table id="mytable">   
    <tr id="name1"><td></td></tr>
</table> 

if (results != null && results.length > 0) {
                        // Build our table header
                        var content = "";
for(i=0;i<data.length;i++)
    {
       content += '<tr>';
        content += '<td></td>'
    }
content += '</tr>';
}
    $("#mytable tbody").append(content);
}

score 0 · Answer 5 · answered Apr 28 '14 at 10:40

I'm not clear with your requirement but i can provide you some basic code hope that helps you.

var jsonList = [{name:'Jhon',address:'Jhon Address goes here',age:'27',status:'Single'},
                {name:'Smith',address:'Smith Address goes here' ,age:'32', status:'Single' }];

function createTable(){


var table = '<table>';
   for(var ind=0;ind< jsonList.length;ind++)
       table += fetchRowInformation(jsonList[ind]);
   console.log(table+'</table>');
}

function fetchRowInformation(json){
     return '<tr><td> Name: ' + json.name + '<td>'+'<td> address: ' + json.address + '<td>'+ '<td> age: ' + json.age + '<td>'+'<td> status: ' + json.status + '<td></tr>';
}

JS Fiddle Demo

score 0 · Answer 6 · answered Jan 22 '20 at 13:20

function tableCreate(rows, columns) {
  var body = document.body
  tbl = document.createElement('table');
  tbl.style.width = '20%';
  tbl.style.border = '1px solid black';

  for (var i = 0; i < rows; i++) {
    var tr = tbl.insertRow();
    for (var j = 0; j < columns; j++) {
      var td = tr.insertCell();
      td.appendChild(document.createTextNode('Cell'));
      td.style.border = '1px solid black';
    }
  }
  tbl.style.marginTop = '10px'
  tbl.style.borderCollapse = 'collapse'
  td.style.padding = '2px'
  body.appendChild(tbl);
}
tableCreate(15, 10);

creating a html table in javascript

6 Answers6