Question

我正在使用Rails应用程序。我需要通过Java脚本在UI中以表格格式显示响应。我想要以下表格格式的结果

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>');
}

使用JavaScript添加HTML表头

1 个答案: