Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化。

最新推荐文章于 2024-09-18 09:47:26 发布
最新推荐文章于 2024-09-18 09:47:26 发布
阅读量857 收藏
点赞数
分类专栏： jquery 文章标签： html jquery 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="table-row-1.0.js"></script>
<style type="text/css">
.table-tr-title{
    height: 26px;
    font-size: 12px;
    text-align: center;
}
.table-tr-content{
    height: 18px;
    background: #FFFFFF;
    text-align: center;
    font-size: 12px;
}
.normalEvenTD{
    background: #DFD8D8;
}
.normalOddTD{
    background: #FFFFFF;
}
.hoverTD{
    background-color: #eafcd5;
    height: 18px;
    text-align: center;
    font-size: 12px;
}
.trSelected{
    background-color: #51b2f6;
    height: 18px;
    text-align: center;
    font-size: 12px;
}
</style>
</head>
<body>
<table width="99%" class="list" style="word-break: break-all" border="0"
        align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98">
        <tr class="table-tr-title">
            <td width="5%">标题</td>
            <td width="5%">标题</td>
            <td width="5%">标题</td>
            <td width="5%">标题</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
        <tr class="table-tr-content">
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
            <td width="5%">数据</td>
        </tr>
</body>
</html>

$(document).ready(function(){
    ///datagrid选中行变色与鼠标经过行变色///
    var dtSelector = ".list";
    var tbList = $(dtSelector);
 
    tbList.each(function() {
        var self = this;
        $("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行，行数：（1，3，5...）
        $("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行，行数：（2，4，6...）
 
        // 鼠标经过的行变色
        $("tr:not(:first)", $(self)).hover(
            function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); },
            function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); }
        );
 
        // 选择行变色
        $("tr", $(self)).click(function (){
            var trThis = this;
            $(self).find(".trSelected").removeClass('trSelected');
            if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){
                return;
            }
            $(trThis).addClass('trSelected');
        });
    });
});


凯子王导
关注
专栏目录
利用jQuery的组合实现表格的奇偶行背景色，并设置鼠标移动到表格行上时行的背景色。
L_w_J_的博客
05-14 1369
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script src="js/jquery-1.11.0.js"&gt;&lt;/s
jQuery实现鼠标滑过行变颜色的表格
weixin_46528860的博客
10-12 1375
jQuery 第一章 jQuery入门 作业1： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/index.css" /> <title></title> </head> <body> <table> <tr st..
jQuery实现表格颜色的交替显示
蒗若晨曦
09-18 1396
很多时候为了清楚显示行数据，便于阅读，一般多是采用隔行颜色交替显示。 当然实现的方式也有很多，如果对于网站已经加载了jQuery（现在很多网站程序多是加载了jQuery的）可以很容易实现。 那么就来说说jQuery实现表格的隔行换行颜色的交替显示，效果图如下 jQuery实现表格颜色的交替显示 - 星知苑 $(document).ready(function(){
jQuery 实现 当鼠标放表格行上的时候改变背景色。
用自己的双手敲出完美的世界！
12-02 8803
今天是学习jQuery第一天，以前看过，但是没有狠下心去学习，今天起，狠下心来好好学。jQuery的事件去掉了js中的on 比如 onclick 在jQuery 中就是click.下面是我今天写的一个例子，当鼠标放在行上的时候改变背景色。 无标题页<!-- $(function(){ $("#tb tr").mouseove
jquery实现表格隔行变色
LHH201016的博客
08-22 1883
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
10-26
### jQuery 实现表格颜色交替变化及鼠标交互效果 在Web开发中，表格是一种常用的展示数据的方式。有时为了提高用户体验，开发者会添加一些动态的交互效果，比如表格的行颜色交替变化，以及鼠标悬停或点击时的颜色...
jQuery实现表格颜色交替显示的方法
10-24
通过以上步骤，可以实现表格颜色的交替显示，具体效果是表格中的奇数行显示一种颜色，偶数行显示另一种颜色，而鼠标悬停在任意一行上时，该行的颜色会发生改变，当鼠标移开后，颜色恢复为原来的交替颜色。...
jquery实现效果比较好的table选中行颜色
10-26
本篇文章将详细讲解如何利用 jQuery 实现表格（table）选中行并改变背景颜色的效果，这有助于提升用户体验，让用户更直观地识别已选择的行。 首先，我们需要创建一个基本的 HTML 结构，包含一个表格（table）。在这...
JQuery 表格操作(交替显示、拖动表格行、选择行等)
10-29
在JQuery中，我们可以为表格行绑定点击事件，并在事件处理函数中添加或移除一个类来标记选中或取消选中的状态。此外，还实现了鼠标悬停在某行上的效果，通过`hover`事件添加或移除悬停类。这种交互可以增强用户界面...
DataGrid单击一行改变此行背景色
welcome...
05-27 1972
DataGrid单击一行改变此行背景色1） 将DataGrid控件的AlternatingItemStyle.BackColor属性设置为“Beige”。2） 在DataGrid控件创建项时激发的事件（DataGrid1_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)）中添加如下代码：　pr
JQuery easyUi datagrid 中 改变行背景色
热门推荐
叶落枫亭
05-02 2万+
前言 JQuery easyUi datagrid 中 使用datagrid生成数据列表后，需要根据相关设置使某些行的样式突出显示，也就是说改变一些行的背景色。 PS： 设置 striped:true  可以使行奇偶行颜色不同。 解决方法 使用datagrid特性，rowStyler  rowStyler:function(rowIndex,rowData){
jQuery EasyUI使用教程之根据条件更换数据网格行背景颜色
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
04-07 2096
jQuery EasyUI最新试用版免费下载> 本教程将为大家介绍在某些条件下如何更改数据网格组件的行样式。当listprice值大于50时，我们将为该行设置不同的颜色。 查看jQuery EasyUI演示 数据网格的rowStyler函数允许您可以自定义行样式，下面的代码演示了如何更改行样式： table id="tt" title="Data
利用JavaScript实现jqGrid指定背景色修改（方便查看、修改）
iilegend的博客
08-25 1771
gridComplete: function () { var ids = $("#gridList").getDataIDs(); for (var i = 0; i < ids.length; i++) { var rowData = $("#gridList").getRowData(ids
Easyui之datagrid实现点击单元格修改单元格背景颜色
weixin_30394333的博客
04-24 1502
前段时间有个需求中有点击datagrid的单元格实现某种事件，调用datagrid的onclickCell这个方法很容易实现，但是体验不好啊，完全不知道自己刚才点击的是哪个单元格，然后就尝试单击单元格的时候给改变单元格的颜色，经过一番折腾，最终实现该功能，然后写下来记录一下实现过程。 关于Easyui这里就不再多说，其是一组基于JQuery的UI插件的集合。其中datagrid估计是Ea...
DataGrid单元格移动变色,点击变色,双击取消颜色,排序.
12-14 1970
实现:1.当鼠标移动到DataGrid的单元格时,单元格变色,并且单元格里的字体同时变色,鼠标变为手的形状.鼠标移出单元格,恢复原样.2.当鼠标点击DataGrid的单元格时,单元格变色,单元格上的显示字体变色;当点击另一个单元格时,前一个单元格以及字体颜色恢复原样,此时的单元格变色,字体变色.3.当双击DataGrid上单击时变色的单元格时,颜色取消,恢复原样.4.DataGrid按顺序(ASC
jquery 点击某行变换背景颜色，其他行还原为原来颜色
y_h_t的专栏
03-19 1万+
jquery 点击某行变换背景颜色，其他行还原为原来颜色 jquery click 变换
jQuery 表格选中颜色变化
weixin_43297321的博客
02-16 484
功能简介：选中偶数行，tr颜色变化；td颜色暂时固定下来。tr红色，td淡蓝色。 <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> ...
html知识点框架
最新发布
爱敲代码的卡拉米的博客
09-18 577
一、HTML基础
jQuery实现表格本地排序与行交替颜色
"使用jQuery实现表格本地排序的技巧和方法" 在网页开发中，有时我们需要对表格数据进行排序，而无需服务器端的参与，这就是所谓的本地排序。jQuery作为一个强大的JavaScript库，提供了丰富的API来帮助我们实现这样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值