表格隔列变色

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        table {
            margin-top: 100px;
        }
    </style>
<table border="1" cellspacing="0" width="600" align="center">
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
    </table>
 <script>
        // 获得元素
        var $trs = $('tr');
        var $tds = $('td');

        $tds.mouseenter(function() {
            //获取当前td的序号
            var index = $(this).index();

            $trs.each(function() {
                // 将对应的每一行的对应的列(单元格)改变其背景颜色
                $(this).children().eq(index).css('background-color', 'red');
            })
        }).mouseleave(function() {
            //获取当前td的序号
            var index = $(this).index();

            // 将对应的每一行的对应的列(单元格)改变其背景颜色
            $trs.each(function() {
                $(this).children().eq(index).css('background-color', 'transparent');
            })
        })
 </script>

表格隔列变色

表格隔列变色

表格隔列变色

上一篇:Struts2(十四)拦截器实现权限管理


下一篇:如何给table加滚动条 table中td设置宽度无效