Question

我有一些代码可以抓取JSON对象并将其显示在HTML表格中，但表格显示不正确。

我希望表格显示如下：

_________________
|    Product1    |
==================   
| 1852ak |  2016 |
==================
|   refurbished  |
__________________

这是我的代码：

var product = {
  "name": "Product1",
  "model": "1852ak",
  "year": "2016",
  "details": "refurbished"
}

$(document).ready(function() {
  var row = $('<tr>');
  row.append('<tr><td colspan = 2s>' + product.name + '</td></tr>');
  row.append('<tr><td>' + product.model + '</td></tr>');
  row.append('<td>' + product.year + '</td></tr>');
  row.append('<tr><td>' + product.details + '</td></tr>');
  $('#sample').append(row);
});

非常感谢任何帮助！

Answer 1

问题是您要在现有行中添加行。

除此之外，您正在考虑将该表作为一个单独的“对象”，并将这两行和单元格直接添加到表中。表格单元格应添加到包含行。

我建议做的是将三个单独的行定义为独立变量，然后将单元格添加到各自的行中。由于该行已创建所有内容，因此会将其添加到表中：

var product = {
  "name": "Product1",
  "model": "1852ak",
  "year": "2016",
  "details": "refurbished"
}

$(document).ready(function() {
  var table = $('#sample');
  var row1 = $('<tr>');
  var row2 = $('<tr>');
  var row3 = $('<tr>');
  row1.append('<td colspan = 2>' + product.name + '</td>');
  table.append(row1);
  row2.append('<td>' + product.model + '</td>');
  row2.append('<td>' + product.year + '</td>');
  table.append(row2);
  row3.append('<td colspan = 2>' + product.details + '</td>');
  table.append(row3);
});

td {
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample"></table>

希望这有帮助！：）

Answer 2

试用此代码：

＆＃13;

var product =
{
"name":"Product1",
"model":"1852ak",
"year":"2016",
"details":"refurbished"
}

$(document).ready(function()
    {
        var row =$('table');
        row.append ('<tr><td colspan = "2">' + product.name + '</td></tr>');     
        row.append('<tr><td>' +  product.model + '</td><td>' +  product.year + '</td></tr>');
        row.append ('<tr><td colspan = "2">' + product.details + '</td></tr></table>');   

    $('#sample').append(row);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample"></div>

＆＃13;

假设$("#sample")是你的表

HTML表格式化问题 - 将jSON对象解析为HTML表格

2 个答案: