.NET Articles

jQuery to create html table dynamically from json data in dotnet MVC

Example of html design code to create table dynamically

<head id="Head1" runat="server">    
    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            //assign button click event to call function to create html table dynamically
            $("#btnCreateHtmlTable").click(function () {

        function CreateHtmlTable() {

            //Clear result div

            //Crate table html tag
            var table = $("<table id=DynamicTable border=1></table>").appendTo("#ResultArea");

            //Create table header row
            var rowHeader = $("<tr></tr>").appendTo(table);

            //Get JSON data by calling action method in controller
            $.get('/home/GetEmployeeData', function (data) {
                $.each(data, function (i, value) {

                    //Create new row for each record
                    var row = $("<tr></tr>").appendTo(table);

    <input type="button" id="btnCreateHtmlTable" value="Create HTML table" />
    <div id="ResultArea">

Example of controller action code to return JSON data which will be created as table rows

    //Action method returns Json result
    public JsonResult GetEmployeeData()
        Employee _employee = new Employee();
        List<Employee> _emplyeeList = new List<Employee>();
        _emplyeeList.Add(new Employee() { Name = "Steve", ID = "1", Department = "IT", Salary = 1000 });
        _emplyeeList.Add(new Employee() { Name = "Samules", ID = "2", Department = "Telecom", Salary = 2000 });
        _emplyeeList.Add(new Employee() { Name = "Edward", ID = "3", Department = "Sales", Salary = 3000 });

        return Json(_emplyeeList, JsonRequestBehavior.AllowGet);
    //Employee class
    public class Employee
        public string Name { get; set; }
        public string ID { get; set; }
        public string Department { get; set; }
        public int Salary { get; set; }

Out put

Summary of the example code

  • Created a button btnCreateHtmlTable
  • Created button click event $("#btnCreateHtmlTable").click() in Document ready function
  • jquery function CreateHtmlTable() creates the HTML table dynamically
  • Created table html tag and header row
  • Get the JSON result from $.get('/home/GetEmployeeData', function (data) {})
  • Create table row from json result using method $.each(data, function (i, value){})