将布尔值分配给 html 表条目答案

【问题标题】：Assigning Boolean Values to html Table Entries将布尔值分配给 html 表条目
【发布时间】：2018-11-05 14:01:30
【问题描述】：

我的目标是为表中的每个条目附加一个 0 或 1 的隐藏值。如果值为 0，则条目将被着色为红色，如果值为 1，则条目将被着色为绿色。

我尝试使用过滤器来实现这一点，并创建两个不同的类“成功”和“危险”，如果将“成功”类添加到条目中，则该条目将显示为绿色，而“危险”则显示为红色。通过使用检查条目中的字符串“True”或“False”的过滤器，我能够让它工作。如果字符串为“真”，则添加成功类，如果为假，则添加危险类。这可行，但是我现在想扩展这个想法，以便每个条目都有一个分配的布尔值。

我正在寻求有关如何执行此操作的帮助。

这是我当前的代码：

<!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>

【问题讨论】：

但是您要指定颜色类以外的值吗？

标签： javascript jquery html css

【解决方案1】：

我建议您将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>

希望这会有所帮助:)

【讨论】：

谢谢 Gerardo，这对我来说很有意义。我试图实现你的代码我的版本现在是编辑中显示的版本奇怪的是它仍然无法正常运行我很好奇我在哪里犯了错误
我确定了解决方案非常感谢您的帮助！
看起来像jajaja。希望您可以投票并接受。祝你好运！

【解决方案2】：

这样的事情似乎有效......

<table width="100%">
    <tr><td>True</td></tr>
    <tr><td>2</td><td style="display:none">0</td></tr>
    <tr><td>3</td><td style="display:none">1</td></tr>
    <tr><td>4</td><td style="display:none">0</td></tr>
    <tr><td>5</td><td style="display:none">0</td></tr>
    <tr><td>6</td><td style="display:none">1</td></tr>
    <tr><td>7</td><td style="display:none">0</td></tr>
</table>

【讨论】：

【解决方案3】：

您可以向单元格添加自己的属性（例如 data-boolean）。

//get all elements with attribute data-boolean and convert the HTML collection into an array
var aCells = [].slice.call(document.querySelectorAll("[data-boolean]")); 

//Loop the elements and add the styleclass
aCells.forEach(function(v,i){
	if(v.getAttribute("data-boolean") === "true"){
    v.classList.add("success");
  }
  
  if(v.getAttribute("data-boolean") === "false"){
    v.classList.add("danger");
  }
});

.success {
  background: green;
}

.danger {
  background: red;
}

<table width="100%">
  <tr>
    <td data-boolean="true">True</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td data-boolean="false">False</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
</table>

【讨论】：