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

我有一个

我想这样做，当我在

td

内单击时，背景颜色变为黑色。如何使用jQuery实现这一点？是onmousedown事件还是click事件

我尝试使用普通JavaScript：

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

SomeText

…但它不起作用…

试试这个

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

jQuery ……或者

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

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

JavaScript ……或者

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 ……或者

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

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

CSS 这不起作用的原因

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

一些文字

…是因为jQuery对象上没有

onmousedown（）

事件（尽管有）。

正确的函数是。但是你可以用一个

。。。
$（“表tr td”）。单击（函数（）{
$（this.css（“背景”，“#fff”）；
});

---

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

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

变色

您的onclick事件试图（不正确的语法）将事件绑定到自身上，并且没有更改元素样式

---

.bind

或

。单击

将绑定到现有元素，

live

将绑定到任何元素，即使该元素随后插入

jQuery引用

---

我认为jquery在这方面可能有些过火。你可以用这样的东西

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

这

你可以在这里玩-
这也可以是头标签上的一个

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

loadtheclicks（）{
var ar=document.querySelectorAll（“td”）；//也可以使用getElementByTagname
对于（变量i=0；i

---

只要叫它onload，你就应该是gold。我在JSFIDLE上也有这样的功能-
在TD标记本身中有没有这样做的方法？@Teivere是的，您可以添加

onclick

属性，但最好使用突兀的事件处理程序，例如，从JavaScript中附加它们。@Teivere-将JavaScript与html分开是一种最佳做法。我尝试将其放在head标记中，但没有效果，但在用html编写表格后，当我将其放在body标记中时确实有效。这是一个要求还是有办法让它工作？将代码放在head标记中？该注释应该是不显眼的事件处理程序：）我不确定“普通”javascript是什么意思，但您的示例使用jquery。我尝试将其放在head标记中，但不起作用，但是当我在用html编写表之后将其放入body标记中时，它确实起了作用。这是一项要求，还是有办法让它能够将代码放入头标签？如果您想放入头标签，请使用

live

。发生的情况是，头部的脚本元素在呈现主体之前执行。您可以使用

live

来绑定事件，即使元素还不存在，也可以使用

$（function（）{}）

在加载页面时执行函数。我将更新答案，使其更加清晰。

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

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