如何将JavaScript与HTML合并以使表格根据值更改颜色？
[英]How to incorporate javascript with HTML to make table change color depending on value?
问题描述
How would I create a javascript that will change the color of the box depending on it's value? 
我将如何创建一个JavaScript，根据其值更改框的颜色？
<table>
<tr class="top row">
<th> Status </th>
<th> Name</th>
<th> StudentID </th>
<th> Grades </th>
</tr>
<tr>
<td> BAD </td>
<td> Jason </td>
<td> 955012 </td>
<td> 20 </td>
</tr>
</table>
eg; 例如; if box value (td) = OK box will be green, if value is BAD box will be yellow. 如果box value（td）= OK，则框为绿色，如果value为BAD，则框为黄色。
Current Java script based from similar question 基于类似问题的当前Java脚本
$('#test [id^="available_"]').each(function(){
var closestTd = $(this).closest('td');
var valueCache = parseInt($(this).val());
if(valueCache === CRITICAL) {
closestTd .addClass('red');
}
else if(valueCache === BAD) {
closestTd.addClass('yellow');
}
else {
closestTd.addClass('green');
}
});
4 个解决方案
解决方案1
2 2016-10-04 18:30:31
Actually, you can do this with pure CSS. 实际上，您可以使用纯CSS做到这一点。
Notice the data-status attribute with the value 请注意data-status属性的值为
<table>
<tr class="top row">
<th> Status </th>
<th> Name</th>
<th> StudentID </th>
<th> Grades </th>
</tr>
<tr>
<td data-status="BAD"> BAD </td>
<td> Jason </td>
<td> 955012 </td>
<td> 20 </td>
</tr>
</table>
And the CSS for styling 还有CSS样式
tr td[data-status="OK"] {
background-color: green;
}
tr td[data-status="BAD"] {
background-color: yellow;
}
Example http://codepen.io/KarlDoyle/pen/jraJEB 示例http://codepen.io/KarlDoyle/pen/jraJEB
解决方案2
2 2016-10-04 18:39:19
Give some class name to each td where you want to apply check on value based ie Use below code 给每个要在其上应用基于值的检查的td提供一些类名，即使用以下代码
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
if($(".chkval").text()=="OK"){
$(".chkval").css("background-color","green");
}
else if($(".chkval").text()=="BAD"){
$(".chkval").css("background-color","yellow");
}
});
</script>
</head>
<body>
<table>
<tr class="top row">
<th> Status </th>
<th> Name</th>
<th> StudentID </th>
<th> Grades </th>
</tr>
<tr>
<td class="chkval"> BAD </td>
<td> Jason </td>
<td> 955012 </td>
<td> 20 </td>
</tr>
</table>
</body>
</html>
解决方案3
1 2016-10-04 18:34:13
You need to use innerHTML to get value from td : 您需要使用innerHTML从td获取价值：
<table>
<tr class="top row">
<th> Status </th>
<th> Name</th>
<th> StudentID </th>
<th> Grades </th>
</tr>
<tr>
<td id="td"> OK </td>
<td> Jason </td>
<td> 955012 </td>
<td> 20 </td>
</tr>
</table>
<script src="path/to/your/script.js"></script>
script.js: script.js：
var td = document.getElementById('td');
if(td.innerHTML == ' OK ')
td.style.backgroundColor = 'green';
else if(td.innerHTML == ' BAD ')
td.style.backgroundColor = 'yellow';
EDIT : added JS function trim() : 编辑 ：添加了JS函数trim() ：
var td = document.getElementById('td');
if(td.innerHTML.trim() == 'OK')
td.style.backgroundColor = 'green';
else if(td.innerHTML.trim() == 'BAD')
td.style.backgroundColor = 'yellow';
解决方案4
0 已采纳 2016-10-04 18:54:36
Another solution using JS. 另一种使用JS的解决方案。
Here is a function which applies a unique class to each td which has a value that you specified. 这是一个将唯一类应用于每个td的函数，该td具有您指定的值。
function addTdClass(string) {
var element = document.getElementsByTagName('td');
for (var i = 0; i < element.length; i++) {
var str = element[i].innerHTML;
if (str.indexOf(string) !== -1) {
element[i].className = 'td-' + string;
}
};
}
addTdClass('BAD');
Live Example http://codepen.io/KarlDoyle/pen/kkxqbv 实时示例http://codepen.io/KarlDoyle/pen/kkxqbv
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.