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

Question

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

我希望在点击这个 td 时，将其背景颜色更改为黑色。我如何使用 jQuery 实现这一点？是 onmousedown 事件还是 click 事件？

在普通 JavaScript 中，我尝试了：

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

...但它没有起作用...

- Teivere

---

我不确定你所说的“正常” JavaScript 是什么意思，但你的示例使用了 jQuery。 - LeRoy

Answer 1

尝试这个...

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

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

最好添加一个类，这样您就可以在样式表中指定样式，而不是将呈现层和行为层耦合在一起。

jQuery

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

...or....

$('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>

这是因为jQuery对象上没有onmousedown()事件（尽管有mousedown()）。

- alex

---

能否在TD标签内部完成这个操作？ - Teivere

@Teivere 是的，你可以添加 onclick 属性，但最好使用侵入式事件处理程序，例如从你的 JavaScript 中附加它们。 - alex

@Teivere - 最佳实践是将JavaScript与HTML分开。 - justkt

我尝试将这个放在头标签中，但是没有起作用，但是当我将它放在HTML表格编写后的body标签中时，它确实起作用了。这是一个要求吗？还是有一种方法可以让代码在头标签中起作用？ - Teivere

该注释应该是 不 难以察觉的事件处理程序 :) - alex

Answer 2

正确的函数是 mousedown。但是你也可以使用一个click函数。

<table> ... </table>

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

在jsFiddle上查看此示例

---

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

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

在 jsFiddle 上查看此示例

你的 onclick 事件尝试（语法不正确）绑定在自己身上，并且未更改元素样式。

---

此示例展示了为什么同样的脚本放在头部不起作用。

.bind 或 .click 将绑定到现有元素上，live 将绑定到任何元素上，即使是事后插入的元素也是如此。

jQuery 参考资料：

• click
• live
• $(fn)

- BrunoLM

---

我尝试将此放入头部标签中，但不起作用，但当我在HTML中编写表格之后将其放入主体标签中时，它确实有效。这是一个要求还是有一种方法可以使代码放入头部标签中起作用？ - Teivere

如果您想要放置在头部标签中，请使用 live。发生的情况是，头部上的脚本元素在 body 渲染之前执行。您可以使用 live，即使元素尚不存在也会绑定事件，或者使用 $(function(){}) 在页面加载时执行函数。我将更新答案以使其更清晰明了。 - BrunoLM

Answer 3

我认为在这里使用jQuery可能过于繁琐。你可以尝试使用像这样的东西。

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

您可以在此处进行试玩 - http://jsfiddle.net/yVvyg/ 这也可以从头标签中完成。

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

只需调用onload，你就可以成功了。我在jsfiddle上也有这个例子 - http://jsfiddle.net/2anSz/4/

- LeRoy