jquery - 将 JSON 解析为 HTML 表 : How do I format the css of the table?

Question

我已经使用 [jquery jsontotable][1] 将 json 数据呈现为基本 HTML 表格

[1]: http://www.jqueryscript.net/table/jQuery-Plugin-For-Converting-JSON-Data-To-A-Table-jsonTable.html它运作良好。我如何格式化 css 以从 json 中选择我的表的 css？或者更进一步……有没有一种方法可以格式化获取 Json 内容的表的 css？我看到的所有示例仅显示对基本表的呈现。这些是我的代码。

<script type="text/javascript">
    $("#mytableDiv").jsonTable({
        head: ['id', 'notice type', 'description'],
        json: ['id', 'notice_type', 'desc']
    });

    $("#mytableDiv").jsonTableUpdate({
        source: "notice.json",
        rowClass: "rowClass",
        callback: function() {

        }
    });
</script>

渲染表格的html是

<table id="mytableDiv">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

这是我的json文件

[
    {
        "id": "2",
        "notice_type": "emergency meeting",
        "target": "teachers",
        "post_date": "2014-01-21 09:27:00",
        "closing_date_time": "2014-01-31 00:00:00",
        "description": "Emergency meeting for all to attend",
        "venue": "Head master's office"
    }
]

Answer 1

您应该已经在 DOM 中编写了您的表，并为每个要放置数据的“点”提供了适当的 ID。

然后从您的 ajax 调用中，只需填充 ids:

#.ajax({
        type: "POST",
        url: "myphpfile.php",
        data: {mydata: mydata},
        dataType : 'json',
        }).done(function(result)
        {
         $('#id').html(result['id']);
         $('#notice_type').html(result['notice_type']);
         $('#target').html(result['target']);
         $('#postdate').html(result['post_date']);       
         $('#closingdatetime').html(result['closing_date_time']);
         $('#description').html(result['description']);
         $('#venue').html(result['venue']);
        });

如果表格不在 DOM 中，您需要编写 .done 函数来创建表格并同时填充它。

要设置表格样式，只需在标题的样式部分输入名称/ID 和 CSS 样式即可。

---

编辑:示例表:

<table id = 'mytable'>
  <tr>
    <td id='id'></td><td id='notice_type'></td><td id='target'></td>
  </tr>
  <tr>
    <td id='postdate'></td><td id='closingdatetime'></td><td id='description'></td>
  </tr>
  <tr>
    <td id='venue'></td><td></td><td></td>
  </tr>
</table>

CSS

#mytable {
  background-color: red;
}
#mytable td {
  border: 1px solid black;
}