我的目标是为表中的每个条目附加一个隐藏值 0 或 1。如果值为 0，则条目将显示为红色，如果值为 1，则条目将显示为绿色。
我尝试使用过滤器来实现此功能，并创建两个不同的类“成功”和“危险”，如果将“成功”类添加到条目中，则条目将显示为绿色，对于“危险”，它将显示为红色。我能够通过使用一个过滤器来检查条目中的字符串“True”或“False”来实现它。如果字符串为“真”，则添加成功类；如果为假，则添加危险类。这行得通，但是我现在想扩展这个想法，以便每个条目都有一个分配的 bool 值。
我正在寻求有关如何执行此操作的帮助。
这是我当前的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.success { background:green; }
.danger { background:red; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
$(function(){
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
});
</script>
</head>
<body>
<table width="100%">
<tr><td>True</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>True</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
</html>
最佳答案
我建议您将 id 添加到您的表中，以便您可以直接访问它。
之后我们得到tr的数组。我还可以在这里建议您验证此数组的大小是否与您的 results 数组相同。只是为了好的措施。
然后我们可以使用 jQuery 的 each 函数迭代这个数组。
let status = [false , true , false , true , false , false , true , true ];
$('#mainTable tr').each((i,tr) => {
if(status[i])
$(tr).addClass('success');
else
$(tr).addClass('danger');
}).success { background:green; }
.danger { background:red; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id='mainTable' width="100%">
<tr><td>True</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>希望这有帮助:)
关于javascript - 将 bool 值分配给 html 表条目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53155918/