現在呈現的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.