Question

JQuery:设置一个<table>,要求点击<td>格子，使背景变为红色。 点击其他格子，上一个背景色恢复颜色。

顺便获取位置
当前位置：第<span id="span1"> </span> 行<span id="span2"> </span> 列

<script>
$(function(){
/*点击得到颜色。 */
$("td").click(function(){
$(this).css("background-color","red");
});
});
//获取点击的table坐标
/* $("#span1 #span2").text. */

</script>

Answer 1

// 不优化：一句话搞定
// 定义一个颜色为红色的样式".active_red"
 $("td").click(function(){
     $(this).addClass('active_red').siblings().removeClass('active_red');
 });

追问

不行，能不能在jq中写，加样式太麻烦了。
$(function(){

$("td").click(function(){
$(this).css("background-color","red");
});
});
现在可以获得背景色了，然后怎么点击下一个td变色，上一个td恢复白色？

追答

// 无脑的写法，浪费资源
 $("td").click(function(){
     $(this).css('background-color','red')
            .siblings().css('background-color','white');
 });
 
 // 优化写法。
var $lastTD;
$("td").click(function () {
    // 把上个设置回默认色（白色），避免第一次
    if ($lastTD) 
        $lastTD.css('background-color', 'white');

    $(this).css('background-color', 'red')

    // 开头把这句话放在if里面，但是这样代码的意思就不清晰
    // 当前的就变成上一个了。
    $lastTD = $(this);
});



剩下自己搞定。

追问

看不懂你的。
$("td").click(function(){
$("td").css("background",""); //其他td为无色
$(this).css("background","red"); //点击为红色。
我这样行了。

追答

我帮不了你，你太年轻了。

不是我说你，我现在没什么好说，以后深入以后，再回想以下，记得回来看看这里，你自己写的东西怎么样。

我没有恶意^.^ 。