Question

我的目标是将0或1的隐藏值附加到表中的每个条目。如果该值为0，则该条目将显示为红色；如果该值为1，则该条目将显示为绿色。

我尝试使用过滤器实现此目的，并创建两个不同的类“成功”和“危险”，如果将“成功”类添加到了条目中，则该条目将被涂成绿色，而对于“危险”，它将被涂成红色。通过使用过滤器，该过滤器可以检查条目中的字符串“ True”或“ False”，从而使它能够正常工作。如果String为“ 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>

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

希望这会有所帮助：）

Answer 2

类似的事情似乎起作用...

assignedByGroup

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

为html表条目分配布尔值

3 个答案: