HTML：根据值更改背景行答案

【问题标题】：HTML: change background row base on valueHTML：根据值更改背景行
【发布时间】：2017-06-11 23:46:45
【问题描述】：

我在HTML 页面中有一个table，我想在第一列获得特定值时将所有行涂成红色。

我在 StackOverflow 上阅读了一些关于此的内容，并将这两个属性（border-collapse 和border-spacing）添加到我的表格中

<table id="my-table" style="border-collapse:collapse; border-spacing:0 1px">

现在，在我的 JavaScript 函数中，如何将背景颜色设置为新值的基数？

我试过这些：

 if (value == 'broken') {my-table[i].css('background-color','red');} // OR   
 if (value == 'broken') {my-table[i].cells.style.background = 'red';}

其中 i 是我正在考虑的行的索引。没有什么变化！任何人都可以给我一个建议吗？谢谢。

【问题讨论】：

相关源代码的其余部分在哪里？ value 定义在哪里？
实际上我认为这与我的问题无关。该值由 AJAX 请求返回，当它成功执行时调用一个方法并在那里执行我编写的代码行。
这将与问题相关 - 如果您编写的代码首先不会导致语法错误。因此，您首先要检查浏览器控制台告诉您的内容。

标签： javascript jquery html css

【解决方案1】：

以下示例演示了遍历表...

您可以根据您的样本进行调整...

你也可以使用table Object...

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Table key´s</title>
    <style>
      td{width:10px;height:10px;background:#ddd;}
      tr:nth-child(5) td:nth-child(5){background:#f00;}
    </style>
  </head>
  <body>
    <div id="tableContainer">
    </div>
    <script>    
      var row=col=5,max=10;
      tableContainer.innerHTML = '<table>'+('<tr>'+'<td>'.repeat(max)).repeat(max)+'</table>';
      window.addEventListener("keyup", function(e){
        var colDiff, rowDiff;
        var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]);
        if (keyMap.has(e.keyCode)){
          document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#ddd';
          [colDiff,rowDiff]=keyMap.get(e.keyCode);
          row+=rowDiff;
          col+=colDiff;
          row = (row>max) ? max : (row < 1) ? 1 : row;
          col = (col>max) ? max : (col < 1) ? 1 : col;
          document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#f00';
        }
      }) 
    </script>
  </body>
  </html>

【讨论】：

【解决方案2】：

使用document.getElementById 并使用变量，它会让生活更轻松

例如

 var bgtable = document.getElementById("my-table").getElementsByTagName("tr");
 bgtable[i].style.backgroundColor = "red";

同时检查您的控制台是否有任何错误，并检查 i 1) 是否已被填充且 2) 具有正确的值。

【讨论】：

谢谢。无论如何，我不想为所有表格着色，而只想为行着色。
您仍然应该使用 getElementbyId。我添加了我认为指向行索引的 [i]。（p.s.这不是代码编写服务，所以是为了指导）

【解决方案3】：

为了设置特定行的背景颜色，您需要在 tr 元素上设置 css。如果没有更多关于 value 定义位置的上下文，我真的不能给你一个具体的代码示例。

这是一个示例，我根据tr 上设置的数据属性来判断一行是否“损坏”：

$("tbody tr", $("#my-table")).each(function() {
  var tr = $(this);

  if (tr.data("broken") == true) {
    tr.css({
      "background-color": "red"
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table" style="border-collapse:collapse; border-spacing:0 1px">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr data-broken="true">
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
  </tbody>
</table>

【讨论】：