title: How to create a table with header rows and collapsible details rows in jQuery
body: <p>I am receiving data from a webservice in jQuery Ajax call like this:</p>
  
  <pre><code>[
      {
          "grpRecord":{
              "Group1":"17658",
              "Group2":"0"
          }, 
          "lstRecords":[
              {
                  "NA":"0",
                  "GROUP1":"17658",
                  "GROUP2":"0",
                  "Task_Name":"01 Internal Plaster ",
                  "material_name":"CEMENT 43 GRADE",
                  "Est_Qty":"100.0000",
                  "Rate":"300.0000",
                  "EST_Mat_Amt":"30000.00000000"
              },{
                  "NA":"0",
                  "GROUP1":"17658",
                  "GROUP2":"0",
                  "Task_Name":"01 Internal Plaster ",
                  "material_name":"CEMENT 43 GRADE ",
                  "Est_Qty":"220000.0000",
                  "Rate":"300.0000",
                  "EST_Mat_Amt":"66000000.00000000"
              },{
                  "NA":"0",
                  "GROUP1":"17658",
                  "GROUP2":"0",
                  "Task_Name":"01 Internal Plaster ",
                  "material_name":"NATURAL SAND ",
                  "Est_Qty":"60000.0000",
                  "Rate":"700.0000",
                  "EST_Mat_Amt":"42000000.00000000"
              }
          ]
      }
  ]
  </code></pre>
  
  <p>This is only one record I am receving multiple records like this. Here 'grpRecord' which should be table header and 'lstRecords' which contains row details. Now my question is that I want to display 'grpRecord' as table rows and 'lstrRecords' as row details as collapsible row detail.</p>
  
  <p>Upto this my code is like this:</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
          function callAjax() {
  
              //Ajax call for drill down data START
              $.ajax({
                  type: 'POST',
                  dataType: 'json',
                  cache: false,
                  url: '@Url.Action("index", "test")',
                  data: {},
                  success: function (response, textStatus, jqXHR) {
  
  
                      alert(response);
                      // document.write(JSON.stringify(response));
                      bindTable(response);
  
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      alert('Error - ' + errorThrown);
                  }
              });
  
  
              //Ajax call for drill down data END
  
  
              //function to bind json to table STart
              function bindTable(response) {
  
                  var data = response;
                  alert("Response recieved");
                  alert(data);
                  for (var i = 0; i &lt; data.length; i++) {
  
                      bindHeader(data[i]);
  
  
                          drawHeader(data[i], ParentID);
  
                  }
  
                  $('.DynamicTable').html('&lt;tbody&gt;' + createTable("0").join('') + '&lt;/tbody&gt;');
  
  
  
  
  
              }
  
              //function to bind json to table  End
              //$("#tabHead").append('&lt;li &gt;&lt;a data-toggle="tab" href="#drillData"&gt;Drill Down&lt;/a&gt;&lt;/li&gt;'); //creating tab head
          }
  
          function bindHeader()
          {
  //code to bind header
  
          }
  
          function bindDetail()
          {
  
  //code to bind details
  }
      &lt;/script&gt;
  </code></pre>