Question

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

我在 StackOverflow 上阅读了有关此内容的内容，并将这两个属性（边框折叠和边框间距）添加到我的表格中

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

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

我跟theese一起试过：

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

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

Answer 1

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

e.g。

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

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

Answer 2

以下示例演示了一个表格......

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

您也可以使用表格对象...

＆＃13;

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

＆＃13;

Answer 3

为了设置特定行的背景颜色，您需要在tr元素上设置css。如果没有关于定义value的更多上下文，我无法真正为您提供特定的代码示例。

这是一个例子，我决定一行是否被打破＆＃34;基于tr上设置的数据属性：

＆＃13;

$("tbody tr", $("#my-table")).each(function() {
  var tr = $(this);

  if (tr.data("broken") == true) {
    tr.css({
      "background-color": "red"
    })
  }
});

＆＃13;

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

＆＃13;

HTML：根据值

3 个答案: