How do I change a specific TD's background color on click with JavaScript/jQuery? -

i have <td style="background-color:white"></td>.

i want make when click inside td, background-color changes black. how accomplish jquery? onmousedown event or click event?

with normal javascript tried:

<td style="background-color:white" onclick="$(this).onmousedown('background-color','black')">sometext</td> 

...but didn't work...

try this...

jquery

$('td').click(function() {    $(this).css('backgroundcolor', '#000'); }); 

...or....

$('table').on('click', 'td', function() {    $(this).css('backgroundcolor', '#000'); }); 

javascript

[].foreach.call(document.getelementsbytagname('td'), function(item) {     item.addeventlistener('click', function() {        item.style.backgroundcolor = '#000';    }, false);  }); 

...or...

var table = document.getelementsbytagname('table')[0];  var changestyle = function(e) {     if (e.target.tagname == 'td') {         e.target.style.backgroundcolor = '#000';     } };  table.addeventlistener('click', changestyle, false); 

the latter examples binds 1 event handler.

it may better add class, can specify styles in stylesheet , not couple presentation , behavioural layer.

jquery

$('td').click(function() {    $(this).addclass('active');  ); 

...or....

$('table').on('click', 'td', function() {    $(this).addclass('active'); }); 

css

td.active {   background: #000; } 

the reason didn't work...

<td style="background-color:white"      onclick="$(this).onmousedown('background-color','black')">      sometext </td> 

...is because there no onmousedown() event on jquery object (though there mousedown()).