如何在单击JavaScript/jQuery时更改TD的背景色?

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

我有一个。

I want to make it so that when I click inside that td, the background-color changes to black. How do I accomplish this with jQuery? Is it onmousedown event or click event?

我想让它当我点击td时，背景颜色变为黑色。如何用jQuery实现这一点呢?是onmousedown事件还是单击事件?

With normal JavaScript I tried:

使用普通的JavaScript:

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

...but it didn't work...

…但是它没有工作…

3 个解决方案

#1

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 only binds one event handler.

后面的示例只绑定一个事件处理程序。

It may be better to add a class, so you can specify your styles in a stylesheet and not couple your presentation and 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 this didn't work...

这个不成功的原因是……

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

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

…因为jQuery对象上没有onmousedown()事件(虽然有mousedown()))。

#2

The correct function is mousedown. But you can just use a click.

正确的函数是mousedown。但是你可以点击一下。

<table> ... </table>

<script>
    $("table tr td").click(function() {
        $(this).css("background", "#fff");
    });
</script>

See this example on jsFiddle

请参见jsFiddle上的这个示例。

---

It is recommended that your script is not mixed with HTML, but this is valid:

建议您的脚本不要与HTML混合，但这是有效的:

<table>
    <tr>
        <td onclick="$(this).css('background', '#fff')">change color</td>
    </tr>
</table>

See this example on jsFiddle

请参见jsFiddle上的这个示例。

Your onclick event was trying (incorrect syntax) to bind an event on itself and it wasn't changing the element style.

您的onclick事件正在尝试(不正确的语法)绑定一个事件本身，并且它没有改变元素样式。

---

This example shows why the same script on the head doesn't work.

这个例子说明了为什么头上的相同脚本不能工作。

.bind or .click will bind to existing elements, live will bind on any element, even if it is inserted afterwards.

.bind或.click将绑定到现有元素，live将绑定在任何元素上，即使它是随后插入的。

jQuery references

jQuery的引用

• click
• 点击
• live
• 生活
• $(fn)
• $(fn)

#3

I think jquery may be overkill here. You can just use something like this.

我认为jquery在这里可能会被过度使用。你可以用这样的东西。

<table>
    <tr>
        <td onclick="javascript:this.style.background = '#000000';">this</td>
    </tr>
</table>

You can play with it here - http://jsfiddle.net/yVvyg/

你可以在这里玩—http://jsfiddle.net/yVvyg/。

This can also bedone from the head tag

这也可以从head标记开始

loadtheclicks() {
var ar = document.querySelectorAll("td"); //could also use getElementByTagname
        for (var i=0; i< ar.length; i++) {
            ar[i].addEventListener("click", function() { this.style.background = '#000000'; }, false);
        }
}

Just call that onload and you should be gold. I have that on jsfiddle as well - http://jsfiddle.net/2anSz/4/

只要称它为onload，你就应该是黄金。我在jsfiddle也有—http://jsfiddle.net/2anSz/4/