欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-04-09 23:36:02
这里`在这里插入代码片`写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你...

(记得先引入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>

本文地址:https://blog.csdn.net/qq_40422692/article/details/107480572