单击时如何突出显示表 TD？答案

【问题标题】：How to highlight Table TD when clicked?单击时如何突出显示表 TD？
【发布时间】：2012-08-24 23:14:40
【问题描述】：

基本上我有一个像下面这样的表格网格，只是更大。

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

并且 iv 使用 CSS 来制作所有 60px x 60px 的正方形，它们不会包含任何数据，但我希望能够单击各个正方形以便背景颜色发生变化，如果我再次单击它会返回原始背景颜色。但我希望能够突出显示尽可能多的正方形。我知道它会在 JavaScript 中，但我该怎么做呢？

【问题讨论】：

标签： javascript highlight html-table

【解决方案1】：

在 jQuery 中：

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

见：http://jsfiddle.net/CpGVK/

我喜欢 Mihai Lorga 的回答，因为它使用纯 JavaScript。但是 jQuery 更容易开发。

【讨论】：

OP 在哪里声明他想要 jQuery？
@MihaiIorga OP 什么时候说他不想要各种框架的好答案。 jQuery IS JavaScript.
那他为什么不加jQuery呢？我没有对你投反对票，因为如果他想要 jQuery，这是一个很好的答案。
另外，伙计们，我不介意它是什么代码，只要它可以工作。虽然 iv 之前从未使用过 jQuery，所以不确定如何实现它，但无论如何感谢大家
@MihaiIorga 为什么人们在使用 ASP.NET 时发布标记为 C# 的问题，或者在使用 PHP 时发布标记为 HTML 的问题...我并不是说我的答案是最正确的答案，但它不应该因为使用的库而被讨厌。

【解决方案2】：

$("td").click(function(){
    $(this).toggleClass("active");
});

类似的东西

【讨论】：

OP 在哪里声明他想要 jQuery？
没有，哪里说他要纯JS？
哦 jQuery 不是 JS，tnx 老兄...不知道...rly？
有一个jQuery专用的标签..智能裤子
并且人们使用 JS 标记 jQuery...你的论点无效

【解决方案3】：

好吧，我将在 jQuery 中发布代码，因为我从不喜欢标准 JS 选择元素的方式.. ;)

$("td").click(function() {
    if($(this).css('background-color') == 'red') { $(this).css('background-color', 'green'); }
    else { $(this).css('background-color', 'red'); }
});

【讨论】：

OP 在哪里声明他想要 jQuery？
阅读它应该可以工作，但它不是出于某种原因，是的，我更改了 IF 语句中的背景颜色以适合我的颜色。
好吧，他并没有说他不想使用任何库。此外，我认为如果他开始学习 jQuery 或其他库对他来说会更好，因为它是非常好的工作工具，并且使许多事情变得更容易。更不用说跨浏览器的兼容性了。
它也不起作用，因为 css('background-color') 不会返回类似 'red' / 'orange' 甚至 #000000 但 rgb(x,y,z);所以必须处理。

【解决方案4】：

试试这个：

<table>
    <tr>
        <td>test 1</td>
        <td>test 2</td>
    </tr>
    <tr>
        <td>test 3</td>
        <td>test 4</td>
    </tr>
</table>

和脚本

window.onload = function(){

    var all = document.getElementsByTagName("td");
    for (var i=0;i<all.length;i++) {
        all[i].onclick = inputClickHandler;       
    }
};

function inputClickHandler(e){
    e = e||window.event;
    var tdElm = e.target||e.srcElement;
    if(tdElm.style.backgroundColor == 'rgb(255, 0, 0)'){
        tdElm.style.backgroundColor = '#fff';
    } else {
        tdElm.style.backgroundColor = '#f00';
    }
}

DEMO

【讨论】：

这可行，但是当我再次单击它时，它不会删除突出显示
已解决 :)，当您单击返回时。