Question

<html>
  <head>
   <style>
   header {
           background-color:black;
           color:white;
           text-align:center;
           padding:5px;   
  }
   nav {
       line-height:30px;
       background-color:#eeeeee;
       height:300px;
       width:400px;
       float:left;
       padding:10px;       
  }
   section {
            width:600px;
            float:right;
            padding:10px;    
  }

 </style>
</head>

<body>
  <header>
    <h1>Generate your own query</h1>
  </header>
    <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">
   var i=0;

   $(document).ready(function() {
     $("#driver").click(function(event){
      $.getJSON('result.json', function(jd) {
          $('#stage').empty();
          $('#stage').append('<p class="selected first"> Queries: ' + jd.queries_status+ '</p>');
          var $tthead=$("#usertable thead");
          //$tthead.html ="";
          /* var theaddata="";
           theaddata += "<tr>";
           theaddata +=  "<th>" + query_id + "</th>";
           theaddata +=  "<th>" + query_status + "</th>";
           theaddata +=  "<th>" + query_result_number + "</th>";
           theaddata +=  "<th>" + query_results + "</th>";
           theaddata += "<th>" +action + "</th>";
           theaddata += "</tr>";
           $tthead.append(theaddata);*/

           var $tbody = $("#usertable tbody");
           $tbody.html(""); 
            var tabledata = "";
                for(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 += "<td>" +jd.list_of_queries[i].query_results_number + "</td>";
                      tabledata += "<td>" +jd.list_of_queries[i].query_results + "</td>";
                      tabledata += "<td>" + '<input type="button" value="details" onclick= "display(this)" name=" '+jd.list_of_queries[i].query_id+' " />' + "</td>";
                      tabledata += "</tr>";
                      $tbody.append(tabledata); 

                                   }
                                });
                            }); 
                     });

     function display(value) {
            $.getJSON('result.json', function(jd) {
            var $tdetail = $("#detail tbody");
            $tdetail.html("");
            var tabledetail = "";
             for(i = 0; i < jd.list_of_queries[value.name-1].list_of_tasks.length; i++ ){
                tabledetail = "";
                tabledetail += "<tr>";
                tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_id + "</td>";
                tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_status + "</td>"; 
                tabledetail+= "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_operation + "</td>";
                tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].number_of_hits + "</td>";
                tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].finished_hits + "</td>";
                tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_result_number + "</td>";
                tabledetail +="</tr>";
                $tdetail.append(tabledetail); 
              }
            });
       }
  </script>
  </head>

 <section>
    <div id="stage1" >
      Please enter your query <input type="text" name="query" size="50">
  </div>
  <div id="stage">
  </div>
  <br />
  <input type="button" id="driver" value="submit query" formaction="http://localhost/queryexample.html"/>
  <br />
  <br />
    <table id="usertable" border="1" cellpadding="5" cellspacing=0>
      <thead>
       <tr>
         <th>query id</th>
         <th>query status</th>
         <th>query result_number</th>
         <th>query results</th>
         <th>action</th>
       </tr> 
      </thead>
      <tbody> </tbody>
   </table>
  <br />

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

<nav>
   <table id="detail" border="1" cellpadding="5" cellspacing=0>
     <tbody> </tbody>
   </table>
   <br />
</nav>

目前，我在初始页面创建了表格，其中包含了表格的内容。是否可以在getJSON函数中创建表的thead和tbody？在此先感谢。评论代码是我之前尝试过的，但它不起作用，希望有人可以修改。

如何在getJSON中创建一个包含thead的表

0 个答案: