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

Question

In the fiddle below, you can click on any of the cells and they will change colors to those in td.highlighted in the CSS. I want the highlighted color to be assigned inline instead and unique to each element.

https://jsfiddle.net/rvxnmz8r/7

this is the line that generates the style for each table element, and I think the main problem is that I am dumb with CSS. Thanks for any help.

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

update: the cells need to remain toggle-able between the default and custom highlighted colors.

Answer 1

When using inline style combined with external CSS, the external need !important to override the inline style.

As a side note, using !important impact the usability of styling in a more difficult way to reuse, though, in your case, create 60 classes to toggle, I found more bad, hence the use of !important

Change your script to

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

And your CSS to

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

Stack snippet

 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

Edit

I see what you're trying to do, but your solution is mixing two things together: inline styles and CSS rules. You can only use style="" on an element to set styling directly on that element, which overrides the rules from your stylesheet. If you want to toggle the highlight class on and off you could do something like this (using jQuery):

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

Also, it needs the !important modifier in the highlighted class, as @LGSon explains above.

In combination with my answer below (removing td.highlighted in the inline style), this should probably result in what you are looking for.

---

Old answer

If you use inline styles, you are styling directly on the HTML element and you won't need to define a CSS selector. Instead of

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

you can simply write:

var hstyle = 'background-color...'

So, your code becomes:

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

Answer 3

You were close. Remove the td.highlighted like so

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