如何使用每个单元格中的独特颜色突出显示单元格onClick

Question

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

https://jsfiddle.net/rvxnmz8r/7

这是产生风格为每个表元素的行，我认为主要的问题是，我哑然与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; 
} 

堆栈片断

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]); 
 

 
    } 
 
    } 
 
}

td { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

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

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

Answer 2

编辑

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

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

此外，它需要在highlighted类!important改性剂，如@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;"';