如何使用每個單元格中的獨特顏色突出顯示單元格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;"';