如何使用 JavaScript/jQuery 在单击时更改特定 TD 的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5833088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change a specific TD's background color on click with JavaScript/jQuery?
提问by Teivere
I have a <td style="background-color:white"></td>.
我有一个<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 事件还是 click 事件？
With normal JavaScript I tried:
使用普通的 JavaScript 我试过：
<td style="background-color:white" onclick="$(this).onmousedown('background-color','black')">SomeText</td>
...but it didn't work...
......但它没有用......
回答by alex
Try this...
尝试这个...
jQuery
jQuery
$('td').click(function() {
$(this).css('backgroundColor', '#000');
});
...or....
...或者....
$('table').on('click', 'td', function() {
$(this).css('backgroundColor', '#000');
});
JavaScript
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
jQuery
$('td').click(function() {
$(this).addClass('active');
);
...or....
...或者....
$('table').on('click', 'td', function() {
$(this).addClass('active');
});
CSS
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()).
...是因为onmousedown()jQuery 对象上没有事件（尽管有mousedown()）。
回答by BrunoLM
The correct function is mousedown. But you can just use a click.
<table> ... </table>
<script>
$("table tr td").click(function() {
$(this).css("background", "#fff");
});
</script>
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>
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.
.bindor .clickwill bind to existing elements, livewill bind on any element, even if it is inserted afterwards.
.bind或.click将绑定到现有元素，live将绑定到任何元素，即使它是在之后插入的。
jQuery references
jQuery 引用
回答by LeRoy
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/
