HTML 表格格式问题 - 将 JSON 对象解析为 HTML 表格答案

【问题标题】：HTML table formatting issue - parsing jSON object into an HTML tableHTML 表格格式问题 - 将 JSON 对象解析为 HTML 表格
【发布时间】：2018-02-12 04:56:50
【问题描述】：

我有一些代码可以抓取 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);
});

任何帮助将不胜感激！

【问题讨论】：

您似乎将<tr> 元素附加到您的row <tr> 元素中。不要那样做
另外，colspan = 2s?

标签： javascript jquery html json html-table

【解决方案1】：

试试这个代码：

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

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

假设$("#sample") 是你的桌子

【讨论】：

大概，#sample 已经是 OP 代码中的 <table>。另外，添加border="1" 使您的示例表更明显:)
不，你原来的答案比这个好很多
@MatheusCuba 为什么要将表格元素附加到div...这是无效标记，因此布局混乱...

【解决方案2】：

问题是您正在向现有行添加行。

除此之外，您将表格视为一个单一的“对象”，并将行和单元格直接添加到表格中。表格单元格应添加到其包含的行。

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

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>

希望这会有所帮助！ :)

【讨论】：