0
我正在使用JSON2html将虚拟数据解析到表格中。每行的最后一个td是一个布尔值。我意识到这可能是一件很容易完成的事情，但由于某种原因，我尝试过的任何事情都没有奏效。我正在嵌入我的代码。我正在寻找使文本变成绿色，如果为假，红色如果为真。JSON2html表格现在尝试更改布尔单元格的文本值颜色
var data = [{
"id": 1,
"first_name": "Lemar",
"last_name": "Rutherfoord",
"gender": "Male",
"hr": 142,
"resp": 86,
"temp": 99.3,
"wandering history": "true"
}, {
"id": 2,
"first_name": "Jo-ann",
"last_name": "Brack",
"gender": "Female",
"hr": 115,
"resp": 22,
"temp": 104.1,
"wandering history": "true"
}, {
"id": 3,
"first_name": "Ogdon",
"last_name": "Reiach",
"gender": "Male",
"hr": 81,
"resp": 16,
"temp": 98.5,
"wandering history": "false"
},
{
"id": 4,
"first_name": "Brigida",
"last_name": "Puttan",
"gender": "Female",
"hr": 98,
"resp": 60,
"temp": 95.6,
"wandering history": "true"
},
{
"id": 5,
"first_name": "Doretta",
"last_name": "Limbourne",
"gender": "Female",
"hr": 87,
"resp": 15,
"temp": 96.5,
"wandering history": "false"
},
{
"id": 6,
"first_name": "Coraline",
"last_name": "Millen",
"gender": "Female",
"hr": 19,
"resp": 19,
"temp": 95.2,
"wandering history": "false"
},
{
"id": 7,
"first_name": "Brian",
"last_name": "Klampt",
"gender": "Male",
"hr": 144,
"resp": 77,
"temp": 102.2,
"wandering history": true
},
{
"id": 8,
"first_name": "Pippy",
"last_name": "Grieswood",
"gender": "Female",
"hr": 67,
"resp": 50,
"temp": 94.3,
"wandering history": "false"
}
];
var transform = {
tag: 'tr',
children: [{
"tag": "td",
"html": "${id}"
}, {
"tag": "td",
"html": "${first_name} ${last_name}"
}, {
"tag": "td",
"html": "${gender}"
}, {
"tag": "td",
"html": "${hr}"
}, {
"tag": "td",
"html": "${temp}"
}, {
"tag": "td",
"html": "${resp}"
}, {
"tag": "td class = 'atRisk'",
"html": "${wandering history}"
}]
};
// \t if($('.atRisk') === "true"){
// \t \t $('.attRisk').addCss('color','red');
// \t } else {
// \t \t $('.atRisk').css('color','green');
// \t }
// \t \t });
// if($('.atRisk').val()){
// \t $('.atRisk').css('color','red');
// }else {
// \t $('.atRisk').addClass('green');
// }
$('#placar > tbody ').json2html(data, transform);
// var wander = document.querySelectorAll('history');
// console.log(wander);
// $.each(wander != true){
// \t console.log('not true');
// }
//alert(wander);
$('.atRisk').each(function() {
if ($(this).val() != true) {
$(this).css('color', 'green');
}
});.atRisk {
color: red;
}<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<p></p>
<table id="placar" class=" table table-bordered table-hover">
<thead class="thead-inverse">
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Heart Rate</th>
<th>Temperature</th>
<th>Respirations</th>
<th>Previous Wandering Events</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
使用空间改变的最后一个单元的类名好极了！非常感谢。我真的很感激你花时间。而且你没有得到他们现场的颜色切换！试图upvote你，但我没有足够的代表点。 – ErikaHarvey
不客气。乐意效劳。 – theGleep