用Jquery制作一个4*4的表格点击每列的时候需要给下一列填充颜色点击最后一行的时候要给上一行变换颜色。

Question

如题所述

Answer 1

必须使用tr each循环获取，否则没办法选中整列，具体如下：

<table class="tb">
<tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
</tr>
<tr>
    <td>222</td>
    <td>111</td>
    <td>111</td>
    <td>111</td>
</tr>
<tr>
    <td>333</td>
    <td>111</td>
    <td>111</td>
    <td>111</td>
</tr>
<tr>
    <td>444</td>
    <td>111</td>
    <td>111</td>
    <td>111</td>
</tr>

jq：

    $(function(){
        $(".tb tr td").click(function(){
            //alert($(this).index())
            var index = $(this).index();
            $(".tb tr").each(function(){
                $(this).children().eq(index).removeClass("tdbg");
                if(index != 3){
                    $(this).children().eq(index + 1).addClass("tdbg");
                }else{
                    curIndex--;
                    $(this).children().eq(index - 1).addClass("tdbg");
                }
            })
        })
    })

css：

.tdbg{ background: #ccc;}

测试：