单击时如何突出显示表TD

How to highlight Table TD when clicked?

本文关键字：TD 显示 何突出 单击      更新时间：2023-09-26

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

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

iv使用CSS制作了所有60px乘60px的正方形，它们不会包含任何数据，但我希望能够点击各个正方形，这样背景颜色就会改变，如果我再次点击，它就会回到原来的背景颜色。但我希望能够突出显示尽可能多的方块。我知道它是用JavaScript编写的，但我该怎么做呢？

试试这个：

<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';
    }
}
​

演示

我会在jQuery中发布代码，因为我从不喜欢标准JS如何选择元素。；）

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

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

像这样的

在jQuery中：

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

请参阅：http://jsfiddle.net/CpGVK/

我喜欢Mihai Lorga的答案，因为它使用了纯JavaScript。然而，jQuery的开发要容易得多。

相关文章：