Question

我有一个带有一些数据的json文件。

[ {"id": 1, "name": "xy", "status": 0}
  {"id": 2, "name": "yz", "status": 1}]

第三个键是状态键，如果项目可用则为1，如果不可用，则为0。

我有一个html表，我显示了json文件中的id，名称和状态，但我不希望在该单元格中显示0或1，我想显示绿色勾号或红色十字。< / p>

我用这段代码显示表格：

$(document).ready(function(){
    $.post("mydata.json", function(data) {
        var radio_data = '';
        $.each(data, function(key, value) {
            radio_data += '<tr>';
            radio_data += '<td>' + value.state + '</td>';
            radio_data += '<td>' + value.author + '</td>';
            radio_data += '<td>' + value.album + '</td>';
            radio_data += '</tr>';
        });
        $('#mytable').append(radio_data);
    });
});

0或1值位于1.行＆＃34;状态＆＃34;。

Answer 1

我不确定你究竟在哪里显示id，名称和状态（基于你为构建表格所分享的代码），但如果你有你想要的dict保存为变量名为object，您可以使用它来选择一个bootstrap glyphicon并将其放在表中（注意，您必须更新标题以包含要显示图标的列的空白<th><th>）：

$(document).ready(function(){
    var icon_html = ''  
    if(object.status == 1){
         icon = '<span class="glyphicon glyphicon-ok" style="color:green">'
    }
    else{
       icon = '<span class="glyphicon glyphicon-remove" style="color:red">' 
    }
    $.post("mydata.json", function(data) {
        var radio_data = '';
        $.each(data, function(key, value) {
            radio_data += '<tr>';
            radio_data += '<td>' + value.state + '</td>';
            radio_data += '<td>' + value.author + '</td>';
            radio_data += '<td>' + value.album + '</td>';
            radio_data += '<td>' + icon_html + '<td>';
            radio_data += '</tr>';
        });
        $('#mytable').append(radio_data);
     });

这也假设您的应用程序中有Bootstrap，如果您不这样做，我肯定会建议您使用它，只需将以下内容放入您的<head>部分即可免费使用HTML：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

如果你不熟悉bootstrap，那真的很直接，你可以在这里开始： https://getbootstrap.com/docs/3.3/getting-started/

在这里找到所有的字形： https://getbootstrap.com/docs/3.3/components/#glyphicons

如何将json文件中的0或1显示为带绿色勾号（1）或红叉（0）的html？

1 个答案: