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
– Allen Chak, Commented Apr 28, 2014 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
– sarath, Commented Apr 28, 2014 at 10:16
check this stackoverflow.com/questions/171027/add-table-row-in-jquery — Rishi Php
– Rishi Php, Commented Apr 28, 2014 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
– Bhushan Kawadkar, Commented Apr 28, 2014 at 10:19

Tuhin · Accepted Answer · 2014-04-28 10:24:44Z

1

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);
 }
}

answered Apr 28, 2014 at 10:24

Tuhin

3,3932 gold badges18 silver badges28 bronze badges

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

Comments

Gaurang s · Accepted Answer · 2014-04-28 10:17:51Z

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, 2014 at 10:17

Gaurang s

8426 silver badges18 bronze badges

3 Comments

sarath Over a year ago

json.lenght is not working.. when i alert the lenght of json is is showing undefined

Gaurang s Over a year ago

change in for loop jsn to json

sarath Over a year ago

i did that. but still json lenght is not getting .

Manoj Saini · Accepted Answer · 2014-04-28 10:28:08Z

0

<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);
}

answered Apr 28, 2014 at 10:28

Manoj Saini

3392 silver badges8 bronze badges

Comments

Allen Chak · Accepted Answer · 2014-04-28 10:37:51Z

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, 2014 at 10:37

Allen Chak

1,9801 gold badge11 silver badges24 bronze badges

answered Apr 28, 2014 at 10:16

Arunkumar Vasudevan

5,3684 gold badges30 silver badges41 bronze badges

1 Comment

sarath Over a year ago

so in html file i will give just the table id?

Juno · Accepted Answer · 2014-04-28 10:40:50Z

0

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

answered Apr 28, 2014 at 10:40

Juno

836 bronze badges

Comments

soroosh.m · Accepted Answer · 2020-01-22 13:20:22Z

0

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

answered Jan 22, 2020 at 13:20

soroosh.m

592 bronze badges

Collectives™ on Stack Overflow

creating a html table in javascript

6 Answers 6

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related