现在呈现的JSON2html表试图更改布尔单元格的文本值颜色

Question

I am using JSON2html to parse dummy data into a table. 我正在使用JSON2html将虚拟数据解析为表。 The last td of each row is a boolean value. 每行的最后一个td是一个布尔值。 I realize that this probably a very easy thing to accomplish, but for some reason, nothing I've tried has worked. 我意识到这可能是一件很容易的事情，但是由于某种原因，我尝试过的任何事情都没有奏效。 I am embedding my code.I am looking to make the text turn green if false and red if true. 我正在嵌入代码。我希望使文本如果为false则变为绿色，如果为true则变为红色。

 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}" }] }; // if($('.atRisk') === "true"){ // $('.attRisk').addCss('color','red'); // } else { // $('.atRisk').css('color','green'); // } // }); // if($('.atRisk').val()){ // $('.atRisk').css('color','red'); // }else { // $('.atRisk').addClass('green'); // } $('#placar > tbody ').json2html(data, transform); // var wander = document.querySelectorAll('history'); // console.log(wander); // $.each(wander != true){ // 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>

Answer 1

Two issues: 两个问题：

1 - you were looking for val() which doesn't exist in the tag; 1-您正在寻找标记中不存在的val() ； I changed it to look for .text() instead. 我将其更改为寻找.text() 。

2 - I still had to compare string-to-string. 2-我仍然不得不比较字符串。 That might just be my code, you can probably work something more clear. 那可能只是我的代码，您可能可以使工作更清晰。

See my evaluation code at the end of the script. 请参阅脚本结尾处的评估代码。

(Also, I wouldn't be surprised if I got red/green reversed. （此外，如果我将红色/绿色反转，也不会感到惊讶。

 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}" }] }; // if($('.atRisk') === "true"){ // $('.attRisk').addCss('color','red'); // } else { // $('.atRisk').css('color','green'); // } // }); // if($('.atRisk').val()){ // $('.atRisk').css('color','red'); // }else { // $('.atRisk').addClass('green'); // } $('#placar > tbody ').json2html(data, transform); // var wander = document.querySelectorAll('history'); // console.log(wander); // $.each(wander != true){ // console.log('not true'); // } //alert(wander); $('.atRisk').each(function() { if ($(this).text().toLowerCase() != "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>

Answer 2

Just to add to this answer a bit: you can actually embed this logic within the transform. 只是在此答案上添加一点：您实际上可以在转换中嵌入此逻辑。 Also here are a few other points 另外这里还有其他几点

"children" has been deprecated for "html" “ children”已弃用“ html”
"tag" has been deprecated for "<>" “标签”已弃用“ <>”
"class" can be added as a property to the transform (rather than doing "td class='something'" You can also use an inline function to return the value of the class which can change the colour of the cell. My example will change the class name of the last cell based on the "wandering history" 可以将“类”作为属性添加到转换中（而不是执行“ td class ='something'”。您还可以使用内联函数返回可更改单元格颜色的类的值。我的示例将根据“漫游历史”更改最后一个单元格的类名称

PS also try not to use spaces in a JSON key name :) PS还尝试不要在JSON密钥名称中使用空格:)

 var transform = { "<>": "tr", "html": [{ "<>": "td", "html": "${id}" }, { "<>": "td", "html": "${first_name} ${last_name}" }, { "<>": "td", "html": "${gender}" }, { "<>": "td", "html": "${hr}" }, { "<>": "td", "html": "${temp}" }, { "<>": "td", "html": "${resp}" }, { "<>": "td", "class":function(){ if(this["wandering history"] === "true") return("atRisk"); else return("notAtRisk"); }, "html": "${wandering history}" }] };

现在呈现的JSON2html表试图更改布尔单元格的文本值颜色

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-10-16 18:28:14

解决方案2
0 2017-10-30 17:54:48

现在呈现的JSON2html表试图更改布尔单元格的文本值颜色

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-10-16 18:28:14

解决方案2 0 2017-10-30 17:54:48

解决方案1
1 已采纳 2017-10-16 18:28:14

解决方案2
0 2017-10-30 17:54:48