JSON2html table rendered now trying to change text value color of a boolean cell
Question
I am using JSON2html to parse dummy data into a table. The last td of each row is a boolean value. 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.
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 answers
solution1
1 ACCPTED 2017-10-16 18:28:14
Two issues:
1 - you were looking for val() which doesn't exist in the tag; I changed it to look for .text() instead.
2 - I still had to compare string-to-string. 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>
solution2
0 2017-10-30 17:54:48
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"
- "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"
PS also try not to use spaces in a JSON key name :)
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}" }] };
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
json2html - Create HTML table
json object to html table conversion using json2html
Using javascript to change the value of the text, and the background color of a cell within a table in HTML page
Change Text And Background Color Of Table Cell Based On Text Value
HTML table change cell color
Using javascript to change table cell background color based on json value
how to highlight on line of the result table using json2html?
Change color of text in ASP.NET table cell (according to value)
how to change the text color of a table cell based on value
jQuery animate table from json2html transform
Related Tags