2

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

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

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

4

4 回答 4

5

试试这个：

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

演示

于 2012-08-30T08:59:16.023 回答
1

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

$("td").click(function() {
    if($(this).css('background-color') == 'red') { $(this).css('background-color', 'green'); }
    else { $(this).css('background-color', 'red'); }
});
于 2012-08-30T08:58:58.950 回答
0

在 jQuery 中：

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

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

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

于 2012-08-30T08:57:08.317 回答
0 
$("td").click(function(){
    $(this).toggleClass("active");
});

像这样的东西

于 2012-08-30T08:57:16.690 回答