[Demo] Assign Array to HTML Table

[Demo] Assign Array to HTML Table

by Tadit Dash

HTML

<p>The Below Button will Fill the Data</p>
<button id="clickButton">CLICK</button>
<table id="tbNames" border="1">
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>AGE</th>
    </tr>
    <!-- <tr>
           <td>
               put value here
           </td>
       </tr>-->
</table>

JavaScript

$(document).ready(function () {
    arrayData();
});

function arrayData() {
    var index;
    var text = "<ul>";
    var htmlTable = '';
    var employee = [];
    employee = [{
        Id: 1,
        Name: "Harshal",
        Age: 22
    }, {
        Id: 2,
        Name: "Bill",
        Age: 44
    }, {
        Id: 3,
        Name: "Thomas",
        Age: 32
    }, {
        Id: 4,
        Name: "Austin",
        Age: 56
    }];

    for (index = 0; index < employee.length; index++) {
        var nameTextBoxId = "nameTextBox" + index;
        var ageTextBoxId = "ageTextBox" + index;

        $("#tbNames tr:last").after("<tr><td>" + employee[index].Id + "</td> <td>" + "<input id='" + nameTextBoxId + "' type='text' value='" + employee[index].Name + "' />" + "</td> <td>" + "<input id='" + ageTextBoxId + "' type='text' value='" + employee[index].Age + "' />" + "</td> </tr>");
    }
}