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

Question

我正在使用 JSON2html 将虚拟数据解析为 table。每行的最后一个 td 是一个布尔值。我意识到这可能是一件很容易完成的事情，但出于某种原因，我尝试过的任何事情都没有奏效。我正在嵌入我的 code.I 希望让文本在 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

两期：

1 - 您正在寻找标签中不存在的 val()；我将其改为查找 .text()。

2 - 我仍然需要逐个比较字符串。那可能只是我的代码，您可能可以做一些更清楚的事情。

脚本末尾看我的评估码

（此外，如果我 red/green 被逆转，我也不会感到惊讶。

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

只是稍微补充一下这个答案：您实际上可以将这个逻辑嵌入到转换中。还有其他几点

"children" 已弃用 "html"
"tag" 已弃用“<>”
"class" 可以作为属性添加到转换中（而不是 "td class='something'" 您还可以使用内联函数 return class 可以更改单元格的颜色。我的示例将根据 "wandering history"

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 table 尝试更改布尔单元格的文本值颜色

JSON2html table rendered now trying to change text value color of a boolean cell

html

javascript

css

json2html