title: How can I create tree table by using AJAX that load 1 level at a time?
body: <p>I'm still unable to make treetable as my expectation.
  My data is from mysql database with 8 level of hierarchy and thousands of records.</p>
  
  <p>I followed the answer posted by <a href="https://stackoverflow.com/users/281469/bcoughlan">bcoughlan</a> to question : 
  <a href="https://stackoverflow.com/questions/5636375/how-to-create-a-collapsing-tree-table-in-html-css-js">How to create a collapsing tree table in html/css/js?</a> and use data from my database.</p>
  
  <p>It works very well, but :</p>
  
  <ol>
  <li><p>It tooks very long time to load the table in the beginning, as my AJAX still loop all data from database in the beginning (I don't have knowledge about this, only copy and trial).</p></li>
  <li><p>I can make the tree colapsed at the first time by using  style="display: none;" but when I click any node from that 1st level, it expands all levels below that node (2nd until 8th level) instead of expanding the 2nd level only.</p></li>
  </ol>
  
  <p>I still cannot figure out how to make AJAX script for the above 2 concerns, to make the page loading time shorter in the beginning of the page.</p>
  
  <p><strong>UPDATE PROGRESS :</strong></p>
  
  <p>Now I can make the AJAX works for the 2nd level.</p>
  
  <p>Still trying although dont have idea how to make it to the 3rd level until 8th level. :)</p>
  
  <p>My script now is as followed, while trying to the 3rd level:</p>
  
  <ol>
  <li><p>Main.php</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          .name               {   color: #000000;         }
          .folderclose        {   height: 16px;
                                  width: 16px;
                                  display: inline-block;  }
          .area .last         {   background-image: url(02_files/01_images/paper_small.png);          }
          .folderclose        {   background-image: url(02_files/01_images/folder_green.png);         }
          .expand .tog        {   background-image: url(02_files/01_images/folder_green_open.png);    }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="jquery-2.1.4.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form&gt;
      &lt;table&gt;
          &lt;tr&gt;&lt;th&gt;No&lt;/th&gt;
              &lt;th&gt;Area &amp; Plant&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Main Group&lt;/th&gt;
              &lt;th&gt;Sub Group&lt;/th&gt;
              &lt;th&gt;Function Group&lt;/th&gt;
              &lt;th&gt;Functional Location&lt;/th&gt;
              &lt;th&gt;Equipment&lt;/th&gt;
          &lt;/tr&gt;
  &lt;?  mysql_connect("localhost","root","");
      mysql_select_db("sfer");
      $areaid = 1;
      $sql = mysql_query("SELECT DISTINCT(Business_Area) FROM b01_functional_location");
      while($data=mysql_fetch_array($sql)){?&gt;
          &lt;tr id="area"&gt;
              &lt;td align='center' class="id"&gt;&lt;?=$areaid?&gt;&lt;/td&gt;
              &lt;td align='left' width='400'&gt;   &lt;a class="folderclose"&gt;&lt;/a&gt;
                                              &lt;a title='&lt;?=$areaid.'. '.$data['Business_Area']?&gt;' href="javascript:void(0)" class="name"&gt;&lt;?=$data['Business_Area']?&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr id="plant&lt;?=$areaid?&gt;"&gt;&lt;/tr&gt;&lt;?
          $areaid++; }
  
  if (!empty($_POST['area'])){
      $plantid = 1;
      $sql = mysql_query("SELECT DISTINCT(Plant) FROM b01_functional_location WHERE Business_Area='$_POST[area]'");
      while($data=mysql_fetch_array($sql)){?&gt;
          &lt;tr id="plant"&gt;
              &lt;td align='center' class="id"&gt;&lt;?=$plantid?&gt;&lt;/td&gt;
              &lt;td align='left' width='400'&gt;   &lt;a class="folderclose"&gt;&lt;/a&gt;
                                              &lt;a title='&lt;?=$plantid.'. '.$data['Plant']?&gt;' href="javascript:void(0)" class="name"&gt;&lt;?=$data['Plant']?&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr id="location&lt;?=$plantid?&gt;"&gt;&lt;/tr&gt;&lt;?
          $plantid++; }}?&gt;
  
          &lt;/table&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  $('document').ready(function(){
      $('#area .name').click(function() {
          var area = $(this).text();
          var areaid = $(this).parent().parent().find('.id').text();
          $('#plant'+areaid).html('&lt;img src="02_files/01_images/loading.gif"&gt;');
          $.ajax({
              type:   'POST',
              url:    'Action.php',
              data:   'area='+area+'&amp;areaid='+areaid,
              success: function(data){
                  $('#plant'+areaid).html(data).toggle();
              }
          });
      });
      $('#plant .name').click(function() {
          var plant = $(this).text();
          var plantid = $(this).parent().parent().find('.id').text();
          $('#location'+plantid).html('&lt;img src="02_files/01_images/loading.gif"&gt;');
          $.ajax({
              type:   'POST',
              url:    'Action.php',
              data:   'plant='+plant+'&amp;plantid='+plantid,
              success: function(data){
                  $('#location'+plantid).html(data);
              }
          });
      });
  });
  &lt;/script&gt;
  </code></pre></li>
  <li><p>Action.php</p>
  
  <pre><code>&lt;?php
  mysql_connect("localhost","root","");
  mysql_select_db("sfer");
  
  if (!empty($_POST['area'])){
  $plantid = 1;
  $sql = mysql_query("select DISTINCT(Plant), Plant_Description from b01_functional_location where Business_Area='$_POST[area]'");
      while($data=mysql_fetch_array($sql)){?&gt;
          &lt;tr id="plant"&gt;
              &lt;td align='center' class="id"&gt;&lt;?=$plantid?&gt;&lt;/td&gt;
              &lt;td align='left' width='400'&gt;   &lt;a class="folderclose"&gt;&lt;/a&gt;
                                              &lt;a title='&lt;?=$plantid.'. '.$data['Plant']?&gt;' href="javascript:void(0)" class="name"&gt;&lt;?=$data['Plant']?&gt;&lt;/a&gt;&lt;/td&gt;
              &lt;td align='left'&gt;&lt;?=$data['Plant_Description']?&gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;? $plantid++;}    }
  
  if (!empty($_POST['plant'])){
  $locationid = 1;
  $sql = mysql_query("select DISTINCT(Location), Location_Desc from b01_functional_location where Plant='$_POST[plant]'");
      while($data=mysql_fetch_array($sql)){?&gt;
          &lt;tr id='location'&gt;
              &lt;td align='center' class="id"&gt;&lt;?=$locationid?&gt;&lt;/td&gt;
              &lt;td align='left' width='400'&gt;   &lt;a class="folderclose"&gt;&lt;/a&gt;
                                              &lt;a title='&lt;?=$locationid.'. '.$data['Location']?&gt;' href="javascript:void(0)" class="name"&gt;&lt;?=$data['Location']?&gt;&lt;/td&gt;
              &lt;td align='left'&gt;&lt;?=$data['Location_Desc']?&gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;? $locationid++;} }
  </code></pre></li>
  </ol>
  
  <p>Need your help.</p>