如何实现表格中鼠标划过一行整行变色,点击一行选中一行

(记得先引入js文件哦)
1.首先我们需要一个简单的表格。下面是我的表格。

<div>
        <table id="_table">
            <tr>
                <td>1</td>
                <td>小可爱</td>
                <td>一定要加油呀!</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小宝贝</td>
                <td>一定要加油呀!</td>
            </tr>  
            <tr>
                <td>3</td>
                <td>大可爱</td>
                <td>一定要加油呀!</td>
            </tr>
            <tr>
                <td>4</td>
                <td>大宝贝</td>
                <td>一定要加油呀!</td>
            </tr>             
        </table>
    </div>

注:有些表格默认没有边框,所以需要自己手动设置。(下面是我手动添加的样式表,放在style标签内)

        #_table{
            border-collapse:collapse;  //合并边框
        }
        td{
            border:1px solid black;
            padding: 10px;
        }

2.这里是关键的部分,实现鼠标点击某一行后,将该行标为高亮。

    <script>
        $("#_table").find("tr").click(function () {                   
            $("#_table").find("tr").removeClass("select");
            $(this).addClass("select");
        })
    </script>

注:这里的select是一个自己写的一个样式。tr:hover{}是为鼠标划过的某一行增加一个效果。(!impartant是提高该样式的优先级,否则hover的颜色就会盖在select设置颜色的上面,鼠标移开才能看到,而我们希望是鼠标点击tr就变色),当然可以不设置这个hover,则只有点击才会产生变化。

        .select{
            background-color:#d3d3d3 !important;
        }
        tr:hover{
            background-color:#f3f3f3;
        }

注:
(1)$("#_table").find(“tr”).click() 这里的 _table是我们设置的table的id,若是其他id需要用自己设置的id替换掉_table, 这里这句话表示的意思是,找到id为_table这个表格的tr,点tr被点击时就执行click事件。
(2) $("#_table").find(“tr”).removeClass(“select”)这句话的意思是找到所有tr移除它们的样式(如果不这样那么每点击一行,这一行就会被高亮并且其他行的高亮不会被取消,如果做多选效果可以不要这句话)。我们在选择前先将所有行样式移除就可以做到只高亮一行的效果。
(3) $(this).addClass(“select”); $(this)表示我当前选中的这个tr,整句话表示为选中的当前行添加我们设置的样式。
3.运行效果
(1)这个是鼠标悬停在某一行的效果
在这里插入图片描述
(2)鼠标选中一行后移开(还未选中另一行)
在这里插入图片描述

4.下面附上完整的代码(我的是用vs写的一个.aspx文件)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OperateToTr.aspx.cs" Inherits="ChangeTrColor.OperateToTr" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-3.5.1.min.js"></script>
    <style>
        #_table{
            border-collapse:collapse;
        }
        td{
            border:1px solid black;
            padding: 10px;
        }
        tr:hover{
            background-color:#f3f3f3;
        }
        .select{
            background-color:#d3d3d3 !important;
        }
    </style>
</head>
<body>
    <div>
        <table id="_table">
            <tr>
                <td>1</td>
                <td>小可爱</td>
                <td>一定要加油呀!</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小宝贝</td>
                <td>一定要加油呀!</td>
            </tr>  
            <tr>
                <td>3</td>
                <td>大可爱</td>
                <td>一定要加油呀!</td>
            </tr>
            <tr>
                <td>4</td>
                <td>大宝贝</td>
                <td>一定要加油呀!</td>
            </tr>             
        </table>
    </div>
    <script>
        $("#_table").find("tr").click(function () {
            $("#_table").find("tr").removeClass("select");
            $(this).addClass("select");
        })
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值