Question

在下面的小提琴中，您可以单击任何单元格，它们会将颜色更改为CSS中td.highlighted中的颜色。我希望突出显示的颜色可以内联分配，并且每个元素都是唯一的。

这是为每个表元素生成样式的行，我认为主要的问题是我对CSS很愚蠢。谢谢你的帮助。

var hstyle = 'style="td.highlighted {background-color: ' + '#'+Math.random().toString(16).substr(-6)  + '; color: black;}"';

更新：单元格需要在默认颜色和自定义突出显示颜色之间保持切换。

Answer 1

当使用内联样式与外部CSS结合使用时，外部需要!important来覆盖内联样式。

作为旁注，使用!important会以更难以重用的方式影响样式的可用性，但在您的情况下，创建60个类来切换，我发现更糟糕，因此使用!important

将脚本更改为

var hstyle = 'style="background-color: ' + '#' + Math.random().toString(16).substr(-6) + '; color: black;"';`

你的CSS

td.highlighted {
  background-color: blue !important;
  color: white !important;
}

Stack snippet

＆＃13;

var elements = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var transtable = [elements, elements, elements, elements, elements, elements];

var output = [];
output.push('<table id="taxatable">');
for (var row = 0; row < transtable[0].length; row++) {
  output.push('<tr>');
  for (var col = 0; col < transtable.length; col++) {
    var hclass = 'class="highlighted"';
    var hstyle = 'style="background-color: ' + '#' + Math.random().toString(16).substr(-6) + '; color: black;"';
    output.push(
      '<td ' + hclass + ' ' + hstyle + '>' + escape(transtable[col][row]) + '</td>'
    );
  }
  output.push('</tr>');
}
output.push('</table>');
document.getElementById('output').innerHTML = output.join('');

var tbl = document.getElementById("taxatable");
if (tbl != null) {
  for (var trow = 0; trow < tbl.rows.length; trow++) {
    for (var tcol = 0; tcol < tbl.rows[trow].cells.length; tcol++) {
      tbl.rows[trow].cells[tcol].onclick = function() {
        this.classList.toggle("highlighted");
      };

      //console.log(tbl.rows[trow].cells[tcol]);

    }
  }
}

＆＃13;

td {
  background-color: black;
  color: white;
}

td.highlighted {
  background-color: blue !important;
  color: white !important;
}

＆＃13;

<div id="output">
</div>

＆＃13;

Answer 2

修改

我看到你正在尝试做什么，但你的解决方案是将两个东西混合在一起：内联样式和CSS规则。您只能在元素上使用style=""直接在该元素上设置样式，从而覆盖样式表中的规则。如果你想打开和关闭highlight类，你可以做这样的事情（使用jQuery）：

$("td").click(function() { $(this).toggleClass('highlighted'); });

此外，它需要!important类中的highlighted修饰符，正如@LGSon在上面所解释的那样。

结合我在下面的回答（删除内联样式中的td.highlighted），这可能会导致您正在寻找的内容。

旧答案

如果使用内联样式，则直接在HTML元素上设置样式，您不需要定义CSS选择器。而不是

var hstyle = 'style="td.highlighted {background-color...

你可以简单地写一下：

var hstyle = 'background-color...'

因此，您的代码变为：

var hstyle = 'style="background-color: ' + '#'+Math.random().toString(16).substr(-6) + '; color: black;"';

Answer 3

你很亲密。像这样删除td.highlighted

var hstyle = 'style="background-color: ' + '#'+Math.random().toString(16).substr(-6)  + '; color: black;"';

如何在每个单元格中使用唯一颜色突出显示on表格单元格

3 个答案: