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

Question

基本上我有一个如下图所示的表格网格，只是大了很多。

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

然后 iv 使用 CSS 制作所有 60px x 60px 的正方形，它们不包含任何数据，但我希望能够单击各个正方形，以便背景颜色发生变化，如果我再次单击它会返回到原始背景颜色。但我希望能够突出显示尽可能多的方 block 。我知道它会在 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