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调用中，只填充id：

#.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;
}

Answer 2

然后为表格设置样式：

$("#mytableDiv td").css(whatever);
$("#mytableDiv th").css(whatever);

就html和css而言，它总是只是一个表，所以这将工作得很好。 “格式化css从json中选择我的表的CSS”是什么意思？是否要使用json传递css值并使用它们来格式化包含它的表？这是非常不清楚的。

Answer 3

如果我理解正确，您可以在表格样式中添加 ！important 。

例如：

.mytableDiv { border: 1px solid black !important; }
.notice_type { color: white !important; }

在这种情况下，您将覆盖适用于表，tr，td等的所有样式......

将JSON解析为HTML表：如何格式化表的CSS？

3 个答案: