Add rows in the html table - Jquery

Hi,
It adds rows in the html table by jquery.

<script type="text/javascript">

    $(function()
    {
   
        var array = @Html.Raw(Json.Encode(@ViewBag.columnHeaders));

        //while loading the view change the gridview header based on the column header list
        var tbl =  $('#tbl_customers');
        var gridhdrRow = $(tbl).find('thead tr').first();
        for(var i=0;i<array.length;i++)
        {
            var hdrcell ='<th style="width:80px;">'+array[i]+'</th>';
            $(gridhdrRow).append(hdrcell);
        }
        //end

        //while loading the view load the rows
        var rowArray = @Html.Raw(Json.Encode(@ViewBag.rows));
     
        data = $.parseJSON(JSON.stringify(rowArray));

        //to iterate the rows
        $.each(data, function(i, item) {
         
            //getting the rowlength
            var rowLength = 0;
            rowLength = $(tbl).find('tbody tr').length;
            rowLength++;
            //end of getting the rowlength

            var dynmicRow = $('<tr><td style="width:80px;">' + rowLength + '</td>');

            //to iterate each column in the row
            $.each(item,function(index)
            {
                var colValue = item[index];
                var strcolValue = colValue.toString();
                $(dynmicRow).append('<td style="width:80px;">'+strcolValue +'</td>');
            });

            //adding new row to the table
            var tbody = $(tbl).find('tbody');
            $(tbody).append(dynmicRow);

        });
        //end of loading the rows

   
    });

</script>

<style type="text/css">
    .selectedHeader {
        background-color:gray;
    }

    .selectedCell {
        background-color: gray;
    }
</style>

 <table  id="tbl_customers">
                          <thead>
                              <tr>
                              </tr>
                          </thead>
                          <tbody>
                          </tbody>
                      </table>

Controller:-

 public ActionResult Index()
        {
            ViewBag.Message = "Dynamically creating rows in html table using Jquery";
            List<CustomerModel> rowsList = new List<CustomerModel>();
            rowsList.Add(new CustomerModel { customerName = "Balu", Age = "20", accountType = "Student"});
            rowsList.Add(new CustomerModel { customerName = "Sidhu", Age = "22", accountType = "Student"});
            rowsList.Add(new CustomerModel { customerName = "Sharma", Age = "30", accountType = "Savings" });

            List<string> columHeadersList = new List<string>();
            columHeadersList.Add("ID");
            columHeadersList.Add("customerName");
            columHeadersList.Add("Age");
            columHeadersList.Add("accountType");
          


            ViewBag.columnHeaders = columHeadersList;
            ViewBag.rows = rowsList;

            return View();
        }

Model:-

 public class CustomerModel
    {
        public string customerName { get; set; }
        public string accountType { get; set; }
        public string Age { get; set; }
    }