jQuery实现 鼠标放在table哪一行 哪一行就变色,移开就恢复

参考别人写出的,代码如下:

<style type="text/css">
            .bgRed {
                background-color: #b2dba1;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("tr").first().nextAll().mouseover(function() { //获取标题行以外的所有tr每一个都给个鼠标悬浮事件
                    $(this).children().addClass("bgRed");    //将悬浮的位置添加css样式
                })
                $("tr").first().nextAll().mouseleave(function() {//鼠标移开
                    $(this).children().removeClass("bgRed")
                })

            })
        </script>
    </head>

    <body>
        <table>
            <tr>
                <th><input type="checkbox" id="checkAll"> 序号</th>
                <th>所属机构</th>
                <th>姓名</th>
                <th>手机号码</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="_dataCheckBox">1</td>
                <td>山东</td>
                <td>张三</td>
                <td>15689547865</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="_dataCheckBox">1</td>
                <td>山东</td>
                <td>张三</td>
                <td>15689547865</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="_dataCheckBox">1</td>
                <td>山东</td>
                <td>张三</td>
                <td>15689547865</td>
            </tr>
        </table>
    </body>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过jQuery的DOM操作实现一行数据中的某一列下方数据自动上移的效果。具体实现步骤如下: 1. 给需要下移的列添加一个class,比如"move-down"。 2. 给需要下移的列添加一个点击事件,当点击该列时,执行下移操作。 3. 在点击事件处理函数中,获取当前点击列所在行的下一行数据。 4. 将下一行数据中需要上移的列的内容保存到一个变量中。 5. 将需要下移的列的内容替换成下一行数据中需要上移的列的内容。 6. 将下一行数据中需要上移的列的内容替换成需要下移的列的原始内容。 7. 最后,将需要下移的列的class移除,避免重复点击造成错误。 下面是一个简单的示例代码: ```html <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th class="move-down">年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td class="move-down">18</td> <td>男</td> </tr> <tr> <td>2</td> <td>李四</td> <td class="move-down">20</td> <td>女</td> </tr> </tbody> </table> <script> $(function() { $('.move-down').click(function() { var $tr = $(this).closest('tr'); var $nextTr = $tr.next(); var downText = $(this).text(); var upText = $nextTr.find('.move-down').text(); $(this).text(upText); $nextTr.find('.move-down').text(downText); $(this).removeClass('move-down'); }); }); </script> ``` 在这个示例中,我们给年龄列添加了一个class"move-down",并绑定了点击事件。点击该列时,会将该列下方的年龄数据上移一行。注意,这个示例只是一个简单的实现,实际情况中可能需要根据需求进行更多的调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值