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

標準のJSが要素を選択する方法が好きではなかったので、jQueryでコードを投稿します.. ;)

$("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/

純粋な JavaScript を使用しているため、Mihai Lorga の回答が気に入っています。ただし、jQuery は開発がはるかに簡単です。

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

このようなもの

于 2012-08-30T08:57:16.690 に答える