Q:

create a dynamic table for json object

Here I have a json object with some elements are in the list, so I want to create a dynamic table for the object, that means if i generate a new json object, the table will be refreshed later. But now, I could not send the json object list to the table, do not know why. I am new to json, thanks.
<html>
<head>
  <title>Generate your own query</title> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">                      </script>
 <script type="text/javascript" language="javascript">
 $(document).ready(function() {
  $("#driver").click(function(event){
      $.getJSON('result.json', function(jd) {
         $('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>');
         $('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>');

       var table = document.getElementById("usertable");
         var tabledata = "";
       for(i=0;i<jd.list_of_queries.length;i++){
         tabledata += "<tr>";
         tabledata += "<td>" + jd.list_of_queries[i].query_id += "</td>";
         tabledata += "<td>" + jd.list_of_queries[i].query_status += "</td>";
         tabledata += "</tr>";
       }
       tabledata.innerHTML= tabledata; 
      ); //.appendTo('#records_table');
    console.log($tr.wrap('<p>').html());
     });
  });

      });
  });
 });
 </script>
  </head>
  <body>
  <p>Generate your own query</p>
  <div id="stage" >
     Query <input type="text" name="query" size="50">
   </div>
 </br>
   <table id="usertable" border="1" cellpadding="5" cellspacing=0>
     <tbody>
     <tr>
       <th>query_id</th>
       <th>query_status</th>
     </tr>
     </tbody>
   </table>
  </br>

  <input type="button" id="driver" value="submit query" />
  <form>
     <input type="submit" id="submit" value="go back"formaction="http://localhost/queryexample.html"  >
  </form>

result.json
{
  "queries_status": "under process",
  "list_of_queries":
  [
    { 
      "query_id": 1,
      "query_status": "under finished",
      "query_results number": "2",
      "detailed query results" : 
      [
        { "result 1":"string 1" },
        { "result 2":"string 2" }  
      ],
      "tasks_number" : 3,
      "list of tasks":
      [
        {
          "task id" :1,
          "task status": "finished",
          "task operation": "JOIN",
          "number of hits": 4,
          "finished hits":4,
          "task result number": "5"
        },
        {
          "task id" :2,
          "task status": "finished",
          "task operation": "SELECT",
          "number of hits": 5,
          "finished hits":5,
          "task result number": "3"
        },
        {
          "task id" :3,
          "task status": "finished",
          "task operation": "GROUPBY",
          "number of hits": 5,
          "finished hits":5,
          "task result number": 2
        }
      ] 
    },
    { 
      "query id": 2,
      "query status": "under process",
      "query results number": null,
      "detailed query results": 
      [
        null
      ],
      "tasks number" : 2,
      "list of tasks":
      [
        {
          "task id" :1,
          "task status": "finished",
          "task operation": "JOIN",
          "number of hits": 4,
          "finished hits":3,
          "task result number": "5"
        },   
        {
          "task id" :2,
          "task status": "under process",
          "task operation": "GROUPBY",
          "number of hits": 5,
          "finished hits":0,
          "task result number": "null"
        }
      ] 
    }
  ]
}

A:

That fiddle with example (except getJson i use parse from html for visual test) : http://jsfiddle.net/Lpj5203v/2/
That ur answer: 
FIRST - u have error in your json results, look:
"query id": 2,
"query status": "under process",
"query results number": null,

In jd.list_of_queries[1] - u miss '_' in keys of hash.
That the javascript with answer:
<script type='text/javascript'>
  $(document).ready(function() {
    $("#driver").click(function(){
      $.getJSON('result.json', function(jd) {
        $('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>');
        $('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>');
        var $tbody = $("#usertable tbody");
        var tabledata = "";
        for(var i = 0; i < jd.list_of_queries.length; i++ ){
          tabledata = "";
          tabledata += "<tr>";
          tabledata += "<td>" + jd.list_of_queries[i].query_id + "</td>";
          tabledata += "<td>" + jd.list_of_queries[i].query_status + "</td>";
          tabledata += "</tr>";
          $tbody.append(tabledata);
        }
      }); 
    });
  }); 
</script>

And also i fix your html to valid:
<p>Generate your own query</p>
  <div id="stage">
      Query <input type="text" name="query" size="50" />
   </div>
      <br />
   <table id="usertable" border="1" cellpadding="5" cellspacing='0'>
     <thead>
       <tr>
         <th>query_id</th>
       <th>query_status</th>
     </tr>
     </thead>
       <tbody></tbody>
   </table>
<br />

Remember: 

not </br>, but <br />
always close input and img tags by <input /> <img />
in table structure is:
<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

P.S. Also, u have a lot syntax errors in js, html, json - try to be more attentive to your error console log
P.P.S 
a += b 

the same is
a = a + b

But a += a + b += c - is syntax error!

