Вставьте ответ Json в таблицу HTML, используя jQuery / Javascript

Question

Мне нужно вставить свой ответ json в таблицу html. Я могу заполнять данные в пользовательском интерфейсе, но он печатает данные только в пользовательском интерфейсе, не добавленном в таблицу.

Ниже кода, который я использую.Как вставить мои данные в столбцы таблицы?

<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>