使用jQuery / Javascript在HTML表中插入Json响应

Question

我需要将json响应插入到html table中。我可以在UI中填充数据，但它仅在UI中打印数据，而未在表中添加数据。

下面的代码我正在使用。 如何将我的数据插入表列？

<div class="table-responsive">
  <table id="http_response" class="table table-bordred table-bordred table-striped">
    <thead>
      <th>Response</th>
    </thead>
      <tr>
        <td>Mac</td>
        <td>Parameter Name</td>
        <td>Response</td>
      </tr>
      </table>
    </div>

   //JS FIle
    var tr;
  tr = $('<tr/>');
  tr.append("<td>" + mac + "</td>");
  tr.append("<td>" + result["response"].parameter_name + "</td>");
  tr.append("<td>" + result["response"].status + "</td>")    

$('#http_response').append(tr);

Answer 1

您应该稍微重组表 。 您可以添加一个tbody来附加tr ：

 //JS FIle var result = {response:{parameter_name: 'param1', status: 'OK'}} var tr,mac = 'MacTEST'; tr = $('<tr/>'); tr.append("<td>" + mac + "</td>"); tr.append("<td>" + result["response"].parameter_name + "</td>"); tr.append("<td>" + result["response"].status + "</td>") $('#http_response tbody').append(tr); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-responsive"> <table id="http_response" class="table table-bordred table-bordred table-striped"> <thead> <tr> <th>Mac</th> <th>Parameter Name</th> <th>Response</th> </tr> </thead> <tbody> </tbody> </table> </div>