html表格示例——不同数据行高亮以及鼠标所在行高亮

最新推荐文章于 2022-01-25 20:13:00 发布
最新推荐文章于 2022-01-25 20:13:00 发布
阅读量1.4k 收藏
点赞数
分类专栏： Web 文章标签： html js table
欢迎转载，多多益善！
本文链接：https://blog.csdn.net/suz_cheney/article/details/80316655
版权 
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        td, th
        {
            border: 1px solid #cad9ea;
            height: 30px;
        }
        th
        {
            background-color: #CCE8EB;
            color: #666;
            width: 600px;
        }
        tbody>tr {
            background-color: #C8C8C8;
        }
        tr:hover {
            background-color: #ffa !important;
        }
        .different {
            background-color: #FF0000 !important;
            color: #00FF00 !important;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            var i, flag = false;
            var rows = $("table").find("tr").length;
            var columns = $("table tbody tr:eq(0)").find("td").length;

            $('table tbody tr').each(function() {
                for (i = 0; i < columns - 1; ++i) {
                    if ($(this).find('td').eq(i).text() != $(this).find('td').eq(i + 1).text()) {
                        flag = true;
                        break;
                    }
                }
                if (flag == true) {
                    $(this).addClass("different");
                }
                flag = false;
            });
        });
    </script>
</head>
<body>
    <table>
        <thead><th>姓名</th><th>张三</th><th>李四</th><th>王五</th><th>老刘</th><th>天七</th></thead>
        <tbody>
        <tr><th>0</th>   <td>01</td> <td>02</td>  <td>03</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>1</th>   <td>04</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>2</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>3</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>4</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>5</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>6</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>7</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>8</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>9</th>   <td>10</td> <td>10</td>  <td>13</td> <td>10</td>  <td>10</td>  </tr>
        <tr><th>10</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>11</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>12</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>13</th>   <td>10</td> <td>10</td>  <td>10</td> <td>14</td>  <td>15</td> </tr>
        <tr><th>14</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>15</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>16</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>17</th>   <td>11</td> <td>11</td>  <td>11</td> <td>11</td>  <td>11</td> </tr>
        <tr><th>18</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>19</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        <tr><th>20</th>   <td>10</td> <td>10</td>  <td>10</td> <td>17</td>  <td>10</td> </tr>
        <tr><th>21</th>   <td>10</td> <td>10</td>  <td>10</td> <td>10</td>  <td>10</td> </tr>
        </tbody>
    </table>
</body>
</html>

最终效果如下图：
这里写图片描述

EmbeddedGuru
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现控制表格行高亮实例
01-19
[css] 代码如下:<style> .height{ background:#666666; /*背景颜色为灰色*/ } tr{ cursor: pointer;...[html] 代码如下:<body> ”1″ width=”40%”> <tr><th></th><th align=”left”>姓名</th><
JS实现关键词高亮：在HTML字符串中匹配“跨标签关键词”
携手天下
11-25 2365
本文发布于个人网站：https://wintc.top/article/59，转载请注明 很久之前（好像刚好是一年前）写过一个Vue组件，匹配文本内容中的关键词高亮，类似浏览器ctrl+f搜索结果。实现方案是，将文本字符串中的关键字搜索出来，然后使用特殊的标签（比如font标签）包裹关键词替换匹配内容，最后得到一个HTML字符串，渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。 当时的实现过于简单，没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到，就又思考了这个问题.
html选择区域高亮,css+js实现部分区域高亮可编辑遮罩层
weixin_30363285的博客
06-04 929
想大家都做过遮罩层这种常见的功能，css或jquery实现，实现方式多样化，这里http://我介绍我在项目中实现的方式，全屏遮罩，部分区域可操作，非常实用。效果如下图：js 实现部分：var myAlert = document.getElementById("alert");var reg = document.getElementById("content").getElementsByT...
html 高亮关键字,JavaScript实现关键字高亮功能
weixin_29182481的博客
06-07 541
高亮功能主要是指对页面中指定区域的指定文字进行高亮显示，也就是背景着色。一般在搜索结果页面会经常用到这个功能。下面就为大家提供一种解决方案，用javascript实现。首先在中引入下面javascript方法：代码如下:/// 使用 javascript HTML DOM 高亮显示页面特定字词./// 实例:/// fHl(document.body,'纸伞|她');/// 这里的body是指高亮...
js实现html搜索关键词高亮显示（标红）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-29 6130
效果图： 一、只适用于找出中文 如果传入英文会特别麻烦，因为比如传个a，innerHtml匹配时会匹配到包含a的标签比如<span>、<a>等。 思路： 获取body的innerHtml，配合正则和字符串方法replace方法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv..
html 搜索高亮显示,用js实现文本点击搜索，文本高亮显示
weixin_39742392的博客
06-04 323
用js实现文本点击搜索，文本高亮显示var clicktitme=0;//name 修改点击次数记录函数var keyworld="芙蓉姐";var maodian=[]; //关键词存储var quanju_clicktitme=0; //全局点击次数记录function shouw(){if(clicktitme==0){$("#test").textSearch(keyworld,{mark...
html 高亮显示表格当前行【转】
weixin_30781775的博客
01-15 181
html在线模拟网:http://www.w3school.com.cn/tiy/t.asp?f=html_basic 高亮显示表格当前行 <html> <head> <title>高亮显示表格当前行</title> <script language="JavaScript"> function trSele...
JavaScript制作动态表格，HTML动态表格 ，JS实现鼠标移入到表格行中实现高亮，可全选，单选，反选，批量删除的动态表格，表格高亮操作
啊哈嗯嗯的博客
04-25 766
演示动画： 简单一点的动态表格：https://blog.csdn.net/weixin_44937336/article/details/105743738 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选_单选</ti...
选中表格行高亮html,table选中的行以指定颜色高亮显示
weixin_29420421的博客
06-09 1028
table选中的行以指定颜色高亮显示 function IniEvent() { var tbl = document.getElementById("tblMain"); var trs = tbl.getElementsByTagName("tr"); for (var i = 0; i...
html表格鼠标高亮行列,JS实现的表格行鼠标点击高亮效果代码
weixin_39935777的博客
06-09 2484
本文实例讲述了JS实现的表格行鼠标点击高亮效果代码。分享给大家供大家参考，具体如下：偶尔在看天天基金网净值公告时，从源代码里剥下的一段js代码，感觉比较实用，分享一下(仅IE有效)var highlightcolor='#E0F2FE';var clickcolor='#ffedd2';function MouseOver(){var source=event.srcElement;if (sou...
html表格鼠标高亮行列,高亮鼠标停留的行和列
weixin_39781186的博客
06-09 270
NamePositionOfficeAgeStart dateSalaryNamePositionOfficeAgeStart dateSalaryTiger NixonSystem ArchitectEdinburgh612011/04/25$320,800Garrett WintersAccountantTokyo632011/07/25$170,750Ashton CoxJunior Tec...
Qml实现的文本显示框(可指定某行高亮)
02-19
利用QML写的文本显示框组件，可以通过指定行号实现文本框某行高亮的效果。
Excel表格快速调整最合适行高和列宽.ppt
11-16
Excel表格快速调整最合适行高和列宽.ppt
易语言高级表格自动调整行高类
07-22
易语言高级表格自动调整行高类源码,高级表格自动调整行高类,创建一个编辑框,高级表格初始化,高级表格_结束编辑_事件,取指定表格行数,GetModuleHandle,CreateFont,SendMessage,DeleteObject,GetWindowTextA,...
多个关键词高亮/标红-完美版（多种特殊情况均包含）
张兴华的博客
01-25 2274
需求背景： 将一段文本中的指定 多个关键词 标红。 需求分析及特殊情况 多关键词需要逐一匹配 标红即：将 命中关键词 的套上 <span style="color: red"><span> 标签 例1：['你好', '你好呀'] 为关键词，文本中有 ’你好呀‘ 时，’你好呀‘ 三个字都要标红 例2：['真好', '好人'] 为关键词，文本中有 ’真好人‘ 时，’真好人‘ 三个字都要标红 例3：['大大'] 为关键词，文本中有 ’大大大‘ 时，’大大大‘ 三个字都要标红 解决代
实现表格行高亮的2种方法
前端小胖鼠
08-07 2538
表格行高亮，就是当我我们把鼠标放到表格上时，所在行背景颜色自动改变，现在分别用纯css和js来实现 首先，写一个表格，给他一个id：tab 第一种纯CSS实现，推荐， #tab tr:not(:first-child):focust-whithin{ background: rgba(173, 216, 230, 0.4); } #tab tr:not...
html表格高亮显示,html 高亮显示表格当前行【转】
weixin_34739646的博客
06-23 678
高亮显示表格当前行高亮显示表格当前行function trSelect(){if (event.srcElement.tagName=='TD'){for(i=0;insDataGridTable.rows[i].bgColor='';}event.srcElement.parentElement.bgColor='red';}}1111111111112222222222223333333333...
表格隔行变色_CSS实现鼠标悬停高亮
weixin_30510153的博客
09-03 402
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>表格隔行变色_CSS实现鼠标悬停高亮</title> <meta na...
table tr悬停高亮
qq_27925345的博客
01-24 1618
jquery写法 $(function(){  $("#table1 tr").mouseover(function(){ $(this).css("background","pink").siblings().css("background","white"); }); }); css写法 tr:HOVER{ background: pink; }
实现数据展示表格的隔行变色，并且对含有文本“王五”的数据行高亮显示
最新发布
06-01
您可以使用CSS来实现表格的隔行变色和行高亮显示。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>表格样式</title> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even) { background-color: #f2f2f2; } tr.highlight { background-color: yellow; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> <tr> <td>王五</td> <td>28</td> <td>男</td> </tr> <tr> <td>赵六</td> <td>35</td> <td>女</td> </tr> <tr class="highlight"> <td>王五</td> <td>28</td> <td>男</td> </tr> <tr> <td>孙七</td> <td>20</td> <td>女</td> </tr> </tbody> </table> </body> </html> ``` 在上面的代码中，我们使用了 `tr:nth-child(even)` CSS选择器来为表格的偶数行设置背景颜色，使用了 `.highlight` CSS类来高亮显示包含“王五”的行。您可以根据需要修改选择器和类名来实现您的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值