表格隔列变色

2021-05-05 15:00:50 阅读：159 来源： 互联网

标签：function index 表格隔列 var 111 变色 td trs

<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>

标签：function,index,表格,隔列,var,111,变色,td,trs
来源： https://blog.csdn.net/weixin_43285360/article/details/116425012

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

表格隔列变色