Dynamically Increase Row Size Of HTML Table In Javascript

I am new to JavaScript and just learning the basics of it. I am doing a sample program and crated a javascript program to show some data in a html page inside div. but it is not dy

Solution 1:

First you need to do a loop and in that

You have to use append() ex.

$( "#your_div_id" ).append( "<tr><td> your_label: ' + json.your_values + '<tr><td>'" );

Reference Link

Solution 2:

First you need to change you HTML like,

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

And if your json is valid then you can use append() like,

$('#name1').append('<td> Name: ' + json.name + '</td>');
$('#address1').append('<td> Address: ' + json.address + '</td>');
$('#age1').append('<td> Age: ' + json.age + '</td>');
$('#status1').append('<td> Status: ' + json.status + '</td>');

Live Demo

Solution 3:

You must read JQuery api Document.

url : http://api.jquery.com/append/

maybe you used .append(), .toAppend(), .prepand(), .after() etc..

code example(.after())

$('#table' tr:last).after('<tr><th width="10%">' + //your code here // + '</th></tr>');