如何使用JavaScript/jQuery更改特定TD的背景颜色？

Question

我有一个<td style="background-color:white"></td>.

我想这样做,当我在里面点击时td,背景颜色变为黑色.我如何使用jQuery实现这一目标？它是onmousedown事件还是点击事件？

使用普通的JavaScript我试过:

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

......但它不起作用......

Answer 1

试试这个...

jQuery的

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

...要么....

$('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); 
});

...要么...

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

后面的示例仅绑定一个事件处理程序.

添加一个类可能更好,因此您可以在样式表中指定样式,而不是将您的演示文稿和行为层结合起来.

jQuery的

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

...要么....

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

CSS

td.active {
  background: #000;
}

这不起作用的原因......

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

...是因为onmousedown()jQuery对象上没有事件(尽管有mousedown()).