In this example we explain that how
to bind JSON Data to HTML Table using jQuery in asp.net.or how to populate JSON
data to HTML table using jQuery. Or how to generate dynamic HTML Table with
JSON data using jQuery. Or how to bind or populate JSON string data to HTML
Table using JavaScript or jQuery in asp.net.
Here we create dynamic HTML Table
through JSON array or JSON data using jQuery.
Code:
<html>
<head>
<style type="text/css">
table
{
border: 1px solid #ccc;
border-collapse: collapse;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<title>Bind JSON data to HTML Table using jQuery</title>
<input type="button" id = "btncreatetable" value="Create Table" />
<hr />
<div id="dvTable">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btncreatetable").click(function () {
//Build an array containing Employee
records.
var employees = new Array();
employees.push(["Employee Id", "Name", "Designation"]);
employees.push(["E001", "Kirit Patel", "Software Developer"]);
employees.push(["E002", "Amit Shah", "QC"]);
employees.push(["E003", "Devaang rathod", "Accountants"]);
employees.push(["E004", "Divyang Parekh", "Technical
Consultant"]);
//Create a HTML Table element.
var table = $("<table />");
table[0].border = "1";
//Get the count of columns.
var columnCount = employees[0].length;
//Add the header row.
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html(employees[0][i]);
row.append(headerCell);
}
//Add the data rows.
for (var i = 1; i < employees.length; i++) {
row
= $(table[0].insertRow(-1));
for (var j = 0; j < columnCount; j++) {
var cell = $("<td />");
cell.html(employees[i][j]);
row.append(cell);
}
}
var dvTable = $("#dvTable");
dvTable.html("");
dvTable.append(table);
});
});
</script>
</head>
</html>
0 comments:
Post a Comment