javascript - 现在呈现的 JSON2html 表试图更改 bool 单元格的文本值颜色

标签 javascript html css json2html

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

最佳答案

两个问题:

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>

关于javascript - 现在呈现的 JSON2html 表试图更改 bool 单元格的文本值颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46776652/

上一篇：css - 页脚始终位于移动设备和桌面设备的底部 CSS

下一篇：html - 风格不以形式改变

相关文章：

javascript - AngularJS 中的清理脚本

php - 将值传递给 URL 并在搜索中使用它们

html - 为什么按钮与div重叠？

javascript - eclipse 。添加文件而不将其复制到工作区

css - 子 div 延伸出父 div

javascript - 数组数据解析生成HTML表格

javascript - 使用 id 获取面板的标题

javascript - 如何不返回 bool 链中的最后一个对象

jquery - 如何将 Bootstrap 的 scrollspy 函数与非 Bootstrap 导航栏一起使用

html - 如何更改浏览器搜索结果中突出显示文本的样式？

©2024 IT工具网  联系我们