Question

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

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

然后iv使用CSS制作60px乘60px的所有正方形，它们不包含任何数据但我希望能够点击各个正方形以便背景颜色改变，如果我再次点击它会回到原始背景颜色。但我希望能够突出显示我想要的任意数量的方块。我知道它会在JavaScript中，但我该怎么做？

Answer 1

试试这个：

<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

Answer 2

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

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

Answer 3

在jQuery中：

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

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

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

Answer 4

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

类似这样的事情

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

4 个答案: