Добавить заголовок таблицы HTML, используя JavaScript

Question

Я работаю в приложении rails. Мне нужно показать ответ в табличном формате в пользовательском интерфейсе через скрипт Java. Я хочу получить результат, подобный приведенному ниже формату таблицы

Device    5E:78:90:88            6E:88:99:13               98:90:20:38

Response  {"statusCode": 200}    {"statusCode": 200}     {"statusCode": 200}

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

HTML-файл

 <div class="col-md-6 span3 border-0 ">
<table  id="http_response"  class="table table-bordred table-striped">
 <thead>
     <td class="info">
   <tr><th>Device</th></tr>
   <tr><th>Response</th></tr>
 </td>
 </thead>
   </div>

JS

function display_result (result, mac) {
 var obj = JSON.parse(result['response'].body)
  var pretty = JSON.stringify(obj, undefined, 4)

   td = $('<td>')
   td.append('<tr><th>' + mac + '</th></tr>')
   td.append('<tr><td>' + pretty + '</td></tr></td>')
   $('#http_response').append(td)

 }

Выше кода Отображение результата в виде (Mac не идет в заголовке)

Device

Response
{"statusCode": 200} {"statusCode": 200} 

Answer 1

Ваш стол немного испорчен.Структура таблицы в html должна выглядеть следующим образом:

table
  (thead/tbody optional)
    tr
      th/td

Если вы хотите, чтобы ваша таблица росла горизонтально - вам нужно добавить th / td к существующим строкам:

<table id="http_response"  class="table table-bordred table-striped">
  <tr class="device_row"><th>Device</th></tr>
  <tr class="response_row"><th>Response</th></tr>
</table>

и js:

function display_result (result, mac) {
  var obj = JSON.parse(result['response'].body);
  var pretty = JSON.stringify(obj, undefined, 4);

  $('#http_response tr.device_row').append('<th>' + mac + '</th>');
  $('#http_response tr.response_row').append('<td>' + pretty + '</td>');
}