现在呈现的JSON2html表试图更改布尔单元格的文本值颜色
[英]JSON2html table rendered now trying to change text value color of a boolean cell
问题描述
我正在使用JSON2html将虚拟数据解析为表。 每行的最后一个td是一个布尔值。 我意识到这可能是一件很容易的事情，但是由于某种原因，我尝试过的任何事情都没有奏效。 我正在嵌入代码。我希望使文本如果为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>
2 个解决方案
解决方案1
1 已采纳 2017-10-16 18:28:14
两个问题：
1-您正在寻找标记中不存在的val() ； 我将其更改为寻找.text() 。
2-我仍然不得不比较字符串。 那可能只是我的代码，您可能可以使工作更清晰。
请参阅脚本结尾处的评估代码。
（此外，如果我将红色/绿色反转，也不会感到惊讶。
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>
解决方案2
0 2017-10-30 17:54:48
只是在此答案上添加一点：您实际上可以在转换中嵌入此逻辑。 另外这里还有其他几点
- “ children”已弃用“ html”
- “标签”已弃用“ <>”
- 可以将“类”作为属性添加到转换中（而不是执行“ td class ='something'”。您还可以使用内联函数返回可更改单元格颜色的类的值。我的示例将根据“漫游历史”更改最后一个单元格的类名称
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}" }] };
使用javascript更改文本值以及HTML页面中表格中单元格的背景色
[英]Using javascript to change the value of the text, and the background color of a cell within a table in HTML page
使用JavaScript根据JSON值更改表格单元格背景色
[英]Using javascript to change table cell background color based on json value
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.