Question

图片如下表：

<table>
  <tr>
    <td>Valor 1</td>
  </tr>
  <tr>
    <td>Valor 2</td>
  </tr>
  <tr>
    <td>Valor 3</td>
  </tr>
</table>

我使用CSS选择器以这种方式尝试过。

tr td [innerHTML="Valor 1"]{
  background: red;
}

我想将具有“Valor 1”列的行着色。我做错了什么？

Answer 1

您可以使用：nth-child（1）属性或javascript。但是如果你只想使用css-way，你应该添加td data-attribute，然后你就可以使用这样的东西：td[data-attr="Valor 1"] { ... }这是我的css解决方案示例https://jsfiddle.net/L1gsq73t/

Answer 2

几行javascript将确保每个表行都有一个类，该类对应于该表行中数据单元格的文本内容。

从那里，你可以简单地为一个，几个或所有类声明样式。

工作示例：

var dataCells = [... document.getElementsByTagName('td')];

dataCells.forEach(function(dataCell){
    var rowClass;
    rowClass = dataCell.textContent;
    rowClass = rowClass.replace(/\s/g, '');
    rowClass = rowClass.toLowerCase();
    dataCell.parentNode.classList.add(rowClass);
});

.valor1 {
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
}

<table>
  <tr>
    <td>Valor 1</td>
  </tr>
  <tr>
    <td>Valor 2</td>
  </tr>
  <tr>
    <td>Valor 3</td>
  </tr>
</table>

Answer 3

我会用JS来做这件事。将所有表格单元格分配给一个数组，然后检查每个单元格，直到找到所需的那个，并设置背景值

function searchCells(){
    var cells = document.getElementsByTagName('td');
    for(i = 0; i < cells.Length; i++){
        if(cells[i].InnerHTML == "Valor 1"){
            cells[i].Background = "red";
        }
    }
}

Answer 4

使用jQuery测试的功能解决方案：

$( "table tr td:contains('Valor 1')" ).css( "background", "red" );

如何选择包含具有特定文本的列的行？

4 个答案: