title: html table with Collapsible rows
body: <p>I am trying to make html table rows collapsible. following is what i have tried so far, but i am not getting the expected result.
  I don't know where i am doing wrong, any help is appreciated.
  This is the Html Code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="navbar"&gt;
    &lt;a href="#" target="_blank"&gt;Option A&lt;/a&gt;
    &lt;a href="#" target="_blank"&gt;Option B&lt;/a&gt;
    &lt;a href="RmsLogoutServlet"&gt;Logout&lt;/a&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class="divtabletree" id="divtabletree"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is JavaScript and jquery Code to display data from database in a table format by making an ajax call to "<strong>ExampleServlet</strong>" servlet.
  I think the problem is in below code only, because the data is displaying properly it's only the row collapsible thing which is not working here.</p>
  
  <pre><code>$(document).ready(function()
  {
      var tkid;
      var id;
      var datatable = '&lt;table id="datatable" class="datatable"&gt;&lt;tr&gt;&lt;th&gt;Part No.&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;th&gt;Data Sheet&lt;/th&gt;&lt;th&gt;Order Link&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;';
      $.ajax
      ({
          url: "ExampleServlet",              
          type: "POST",
          data: JSON.stringify(id),
          dataType: "json",
          success: function(json) 
          {                
              var info1=json.JSonDataFinal;   
              $.each(info1, function(index, element) 
              {
                  var info = element.JsonData;
                  var tabletemp;
                  var tablerows;
                  var tablerowssub;
                  $.each(info, function(index, element) 
                  {   
                      if(tkid!=element.tokenid)
                      {
                          datatable = datatable + '&lt;tr class=header&gt;&lt;td colspan=5&gt;Header&lt;/td&gt;&lt;/tr&gt;';
                          datatable = datatable + '&lt;tr&gt;&lt;td&gt;'+element.partno+'&lt;/td&gt;&lt;td&gt;'+element.description+'&lt;/td&gt;&lt;td&gt;'+element.datasheet+'&lt;/td&gt;&lt;td&gt;'+element.orderlink+'&lt;/td&gt;&lt;td&gt;'+element.tokenid+'&lt;/td&gt;&lt;/tr&gt;';
                          tkid = element.tokenid;
                      }
                      else
                      {
                          datatable = datatable + '&lt;tr&gt;&lt;td&gt;'+element.partno+'&lt;/td&gt;&lt;td&gt;'+element.description+'&lt;/td&gt;&lt;td&gt;'+element.datasheet+'&lt;/td&gt;&lt;td&gt;'+element.orderlink+'&lt;/td&gt;&lt;td&gt;'+element.tokenid+'&lt;/td&gt;&lt;/tr&gt;';
                      }                   
                  });
              });
              datatable = datatable + '&lt;/table&gt;'
              $("#divtabletree").append(datatable);
          },
          error: function()
          {
              ;
          }
      });
  });
  $(document).ready(function()
  {
      $('tr').hide().filter(function () 
      {
          return $(this).find('td[colspan]').length;
      }).addClass('header').css('display', 'table-row').click(function () 
          {
              $(this).nextUntil('tr.header').css('display', function (i, v) 
              {
                  return this.style.display === 'table-row' ? 'none' : 'table-row';
              });
          });
  });
  </code></pre>
  
  <p>The problem here is when i click on the header row nothing happens.
  Where as the rows beneath the header row until next header row should be toggled when clicked on a header row.</p>