JS+CSS实现表格高亮的方法

qiukui00 2015-08-05

本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下：

这里使用JavaScript+CSS实现表格高亮的功能，实际上类似于隔行换色的效果，说法不同而已，只不过本效果是在鼠标移上时触发，移出结束。

运行效果如下图所示：

JS+CSS实现表格高亮的方法

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>高亮的表格</title>
<meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1" />
<style>
p, td, th {
  font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
  border: 1px solid #D6DDE6;
  border-collapse: collapse;
  width: 80%;
}
.datatable td {
  border: 1px solid #D6DDE6;  
  padding: 4px;
}
.datatable th {
  border: 1px solid #828282;
  background-color: #BCBCBC;
  font-weight: bold;
  text-align: left;
  padding-left: 4px;
}
.datatable caption {
  font: bold 0.9em Arial, Helvetica, sans-serif;
  color: #33517A;
  text-align: left;
  padding-top: 3px;
  padding-bottom: 8px;
}
.datatable tr:hover, .datatable tr.hilite {
  background-color: #DFE7F2;
  color: #000000;
}
</style>
</head>
<body>
<table summary="List of new students 2003" class="datatable">
 <caption>Student List</caption>
 <tr>
 <th scope="col">Student Name</th>
 <th scope="col">Date of Birth</th>
 <th scope="col">Class</th>
 <th scope="col">ID</th>
 </tr>
 <tr>
 <td>Joe Bloggs</td>
 <td>27/08/1997</td>
 <td>Mrs Jones</td>
 <td>12009</td>
 </tr>
 <tr>
 <td>William Smith</td>
 <td>20/07/1997</td>
 <td>Mrs Jones</td>
 <td>12010</td>
 </tr>
 <tr>
 <td>Jane Toad</td>
 <td>21/07/1997</td>
 <td>Mrs Jones </td>
 <td>12030</td>
 </tr>
 <tr>
 <td>Amanda Williams</td>
 <td>19/03/1997</td>
 <td>Mrs Edwards</td>
 <td>12021</td>
 </tr>
</table>
<script type="text/javascript">
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
  rows[i].onmouseover = function() {
    this.className += ' hilite';
  }
  rows[i].onmouseout = function() {
    this.className = this.className.replace('hilite', '');
  }
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

qiukui00

qiukui00

相关推荐

nginx配置文件语法高亮的Sublime Text扩展

从上面的链接下载sublime Text编辑器为nginx配置文件专属的扩展：。这是安装该扩展之前，用sublime text打开的nginx.conf配置文件的外观，没有任何语法高亮：

fenghuoliuxing0 / 0评论 2020-08-01

vim 简单操作

在命令行模式下，命令模式下，输入:nohlsearch 也可以:set nohlsearch； 当然，可以简写，noh或者set noh。删除光标所在的向下n行，例如20dd则是删除光标所在的向下20行。x,X:x向后删除一个字符,X向前删除一个字符

yhuihon / 0评论 2020-05-31

使用JavaScript / jQuery为网站创夜间/高亮模式

为文档文件以及黑暗模式创建CSS。添加一个开关转换器按钮，以在明暗模式之间进行切换。示例1：以下示例演示了使用JQuery代码在明暗模式之间进行切换。它基本上通过使用函数hasClass（），addClass（）和removeClass（）方法来工作。DO

苗疆三刀的随手记 / 0评论 2020-05-27

I5TING_TOC转成的HTML，怎样高亮代码

找到安装位置全局安装一般在默认位置C:\Users\administrator\AppData\Roaming\npm\node_modules\i5ting_toc

玫瑰小妖 / 0评论 2020-05-10

Elasticsearch之高亮查询,聚合查询,

如果返回的结果集中很多符合条件的结果，那怎么能一眼就能看到我们想要的那个结果呢？比如下面网站所示的那样，我们搜索elasticsearch，在结果集中，将所有elasticsearch高亮显示？如上图我们搜索百度一样。#我们使用highlight属性来实现

心丨悦 / 0评论 2020-05-08

VSCode操作

按快捷键“Ctrl+Shift+P”。在“vscode”顶部会出现一个搜索框。输入“configure language”，然后回车。“vscode”里面就会打开一个语言配置文件。Auto Rename Tag 修改HTML标签时，自动修改匹配的标签

zhanghaibing00 / 0评论 2020-04-21

Django Haystack 全文检索与关键词高亮

博客提供 RSS 订阅应该是标配，这样读者就可以通过一些聚合阅读工具订阅你的博客，时时查看是否有文章更新，而不必每次都跳转到博客上来查看。现在我们就来为博客添加 RSS 订阅功能。在此之前我们使用了 Django 内置的一些方法实现了一个简单的搜索功能。但

Lius / 0评论 2020-02-14

elasticsearch之高亮查询

"pre_tags": "<b class=‘key‘ style=‘color:red‘>",

Smartcxr / 0评论 2020-02-02

机器学习开篇——编译器的选择

最初大家都推荐用pycharm，我下载了专业版，的确很帅气，语法高亮看着很舒服，代码自动补全很科学，File explorer层次也很清晰，是一款不可多得的上乘IDE。Jupyter Notebook，代码可以分块执行，同一文件下的变量可保留，重复执行同一

vshacker / 0评论 2020-01-28

vi/vim下如何搜索字符串

命令模式下，输入:nohlsearch 也可以:setnohlsearch；当然，可以简写，noh或者set noh。

zycglboy / 0评论 2019-12-21

修改博客园markdown编辑器代码高亮风格的方法

作为一个工程师，追求极致与艺术也应当成为我们生活中的一部分，作为自己的心爱之物——博客，当然也得装扮一下，我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的，已经有前辈开发了一些代码高亮的样式可供我们开箱即用。Highlightjs就是这样一款产品

James0 / 0评论 2019-12-15

自己写VIM语法高亮插件

实习之后发现，一切代码活动都局限在一个终端界面了。由于一些安全原因和开发环境的方便，开发都是通过远程ssh到开发机上开发，自然也就只有终端界面了。VNC因为安全原因不让用，所以就别妄想使用Clion等IDE来开发了。在这样的背景下，人们大多使用VIM或者E

rootdream / 0评论 2019-11-17

nginx服务学习第二章

nginx服务搭建完成后，查看nginx.config的时候发现没有高亮字符，要想配置文件出现高亮方便观看，需要修改一些配置文件，修改步骤如下：

zycglboy / 0评论 2019-11-12

Android listview 一行高亮

listview这个控件，对于已经学过Android的朋友是很熟悉的，应该不需要我在此来讲述下吧。举个简单的例子来回顾下吧。注意，不要忽略了权限哦。在API文档中，Dev Guide一栏下，看左侧栏目，往下拉，找到<uses-permission&g

Urchindong / 0评论 2011-08-01

隐藏android WebView 高亮选择框

结合HTML+CSS+JS+phonegap来开发移动APP开始广泛应用， 最简单方法就是把phonegap当作一个WebView来加载本地代码。在测试过程中发现每当点击页面元素时，android模拟器就会默认显示一个高亮的边框， 像这样：。按理也可以隐藏

Mexican / 0评论 2014-03-19

angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

import { Pipe, Injectable, PipeTransform } from '@angular/core';

genglang / 0评论 2018-08-17

charles 高亮Hosts

Focus Host是焦点域名的；这里配置好的可以在结构视图中，单独拎出来显示；如下图，在把zhubangbang.com设为焦点域名，在视图中是下图这么展示的；选择focued后，就会只保留你的焦点域名；

89589432 / 0评论 2019-09-22

vue+elementUI实现表格关键字筛选高亮

本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下。<el-input type="search" v-model="search" style="w

Johnjianyo / 0评论 2019-05-28

jQuery对底部导航进行跳转并高亮显示的实例代码

直到看了网上的一些例子，才想明白，之前一直是一种点击触发事件才高亮的思维去做，这个虽然可以了，但是页面跳转了就又都没了。以上所述是小编给大家介绍的jQuery对底部导航进行跳转并高亮显示的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及

技术相关 / 0评论 2019-04-23

微信小程序的搜索高亮、自定义导航条等踩坑记录

前言我在写这个博客的小程序过程中，遇到了很多的问题。之前断断续续也写过不少JavaScript和css，不过都是半吊子。所以在看了一会小程序demo代码，就开工了。虽然在一天之后就基本完成了大体功能框架，但依旧在细节上碰到了不少问题。很遗憾，小程序直接将这

Tomato / 0评论 2018-10-17

vim关键字自动高亮，记忆退出位置，显示列号

" Uncomment the following to have Vim jump to the last position when " reopening a fileif has au BufReadPost * if lin

SlowWakler / 0评论 2011-07-23

solr索引数据的增删改查、高亮、分组和排序操作

solr的增加有两种方式,一种是基于javaBean的方式增加,另一种是基于SolrInputDocument的方式的增加：。ss.commit(); //提交之后才有效.javaBean必须用Field进行标注.ss.deleteByI

Ctommy / 0评论 2014-11-25

vim中关键字高亮

在目录/etc/下面，有个名为vimrc的文件，这是系统中公共的vim配置文件，对所有用户都有效。而在每个用户的主目录下，都可以自己建立私有的配置文件，命名为：“.vimrc”。例如，/root目录下，通常已经存在一个.vimrc文件。

xujidong0 / 0评论 2010-10-16

solr查询参数使用说明

q–查询字符串，必须的。Solr中用来搜索的查询。有关该语法的完整描述，请参阅参考资料中的“LuceneQueryParserSyntax”。可以通过追加一个分号和已索引且未进行断词的字段的名称来包含排序信息。默认的排序是scoredesc，指按记分降序排

aiyueqingfeng / 0评论 2012-06-13

fedora配置vi高亮

默认的vi是/bin/vi，不是vim.只需

86477414 / 0评论 2010-06-16

Lucene入门级笔记三 -- 给关键词添加高亮效果

也就是说检索已经出来结果了。* 于是 Highlighter 要在查询出的结果数据再一次分词，然后检索关键字，再给关键字前后附上指定的前缀后缀。* getBestFragment 方法返回其内部加完高亮后的文本。然后程序员手动替换掉 Docoument 中

EffortsRun / 0评论 2011-10-24

如何配置SOLR高亮 (highlight)

<str>Flexible and Adaptable with <em>XML</em> configuration and Schema</str>. 要启用某个字段的highlight功能，就得保证该字

aiyueqingfeng / 0评论 2011-05-02

怎样实现不用插件使WordPress代码高亮（加色）

对于一个技术站的博客，要展示代码的地方很多。为了美化代码的显示效果，使WordPress代码高亮显示是最好的方式。目前网络上有许多WordPress代码高亮的插件，不过都很臃肿。一款帮助开发者/coder 发表代码片段更加简单和漂亮的插件。Highligh

WordPress / 0评论 2010-12-15

微信小程序的搜索高亮、自定义导航条等踩坑记录

前言我在写这个博客的小程序过程中，遇到了很多的问题。之前断断续续也写过不少JavaScript和css，不过都是半吊子。所以在看了一会小程序demo代码，就开工了。虽然在一天之后就基本完成了大体功能框架，但依旧在细节上碰到了不少问题。很遗憾，小程序直接将这

xieshunhai / 0评论 2018-10-17

CSS3常见技巧（一）：如何禁止文本选择高亮

根据 Can I use显示，目前user-select已经支持绝大多数浏览器了，不过如果想在IE9或者更早之前使用，还需要使用浏览器前缀。

zyhui / 0评论 2019-06-30

VIM 为什么光标移动缓慢

Mac上没感觉，但是同样的配置在树莓派上很糟糕，jk移动都非常缓慢，大概等接近一秒才能反应，这让人有点不能忍。同样，我们也可以通过:au CursorMoved查看鼠标移动时定义的调用。查看后发现是来自matchparen.vim这个内置插件中的方法。于是

lbuskeep / 0评论 2019-06-30

springboot ElasticSearch 简单的全文检索高亮

前阵子和张三丰聊天提到了es。这次正好有机会学习并使用

王明晓 / 0评论 2019-06-29

vscode或vetur插件升级后vue代码高亮失效解决

就在2018年12月3日的清晨，手贱升级了vetur插件，从此我的vscode一片灰暗……试过了搜索到的一些解决方案，比如重装vetur啊，更改设置啊，都没用。最后才发现vetur官方 github 给的方案比较靠谱~就是从vsce安装插件，或者版本回退下

flyingbird / 0评论 2019-06-29

win10日历交互效果

win10日历早就想试着实现以下win10日历的动态css效果，现在终于有时间试试啦。本篇文章只是实现简单的效果，进阶篇后续会放上来目标效果鼠标移入目标元素，周围相关八块元素点亮，点亮高光范围呈圆形点击元素选中，呈蓝色色块实现效果图1.win10原图2.初

yzhj00 / 0评论 2019-06-29

全新的同步渲染 markdown 文章 + 高亮更新 书写体验

前言16 年在 SF 中发布了文章 "探究SegumentFault Markdown编辑器"，目的是仿 SF 线上书写 Markdown 文档的体验：高亮定位修改节点

jsqip / 0评论 2019-06-28

MarkDown/Html在线转换（支持代码高亮，可复制到微信公众号、今日头条）

MarkDown/Html在线转换能够将md渲染成html并且能保持代码高亮，可以方便的复制待格式的html粘贴到微信公众号，CSDN，简书，博客园，开源中国等。

quiyo / 0评论 2018-10-17

HTML高亮关键字真麻烦

有这么一个功能：在网页中高亮关键字。本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法，希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过看结果吧~使用 in

Element张冰 / 0评论 2019-06-28

angular2/ionic2 实现搜索结果中的搜索关键字高亮

添加一个pipe：import { Pipe, Injectable, PipeTransform } from '@angular/core';html中使用方法：<ion-label [innerHTML]="item.name | k

半纸药笺 / 0评论 2019-06-28

JS 代码高亮加复制代码

<!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. &lt;html&gt;&l

iamrunner / 0评论 2016-08-30

PHP ueditor 的代码高亮

input, select, textarea{ font-family:\5FAE\8F6F\96C5\9ED1,&#39;Arial&#39;; background-color:#fff margin:0; padding:0; ou

我的程序员人生 / 0评论 2016-08-30

HTML&CSS基础学习笔记1.7-高亮文本及组合使用

HTML提供了<mark>标签可以让你的文本高亮，这样看起来更加醒目。<mark>标签内的文本会呈现特殊的样式，它和<em>，<strong>一样也是一个带有语义的标签。DOCTYPE html><

每天积累一点点 / 0评论 2016-07-15

Lucene05---Highlighter

前面讲了分词器，但是我们在搜索的时候是不是还有一个效果就是高亮和一段文本。那么这里我们就来介绍一下Highlighter。可以截取一段文本，并且让关键字高亮显示。

田雄兵 / 0评论 2012-02-10

solr 高亮处理 (highlight)

打开SOLR的核心配置文件： solrconfig.xml找到 standard request handler开始高亮的配置。写入以下XML配置代码：<requestHandler name="standard" class=&

随手一记 / 0评论 2011-10-19

修改Google搜索结果高亮显示效果

最近不知道什么原因，登陆Google账号后，搜索结果显示全部为蓝色加粗，再也看不到红色结果了，退出登录后清空cookie，搜索结果关键词红色高亮恢复。网上也有一些其他人遇到这种情况，但是没有好的解决办法，总不能一直不登陆Google吧。网上有一种解决方案，

张洁的笔记 / 0评论 2014-09-25

Lucene系列（三）查询及高亮

<font color="#0066CC">一 准备</font><font color="#00CC00">创建项目并添加Maven依赖</font>. -- Luc

exitzhang / 0评论 2019-06-27

react-highlight-words源码解析

最重要是调用findAll函数，返回[{start: startIndex, end: endIndex, highlight: boolean}, {同样的结构}]，将一段句子合理的划分为从前到后的高亮部分和未高亮部分然后遍历chunks， 返回高亮和未

wxuande / 0评论 2019-06-26

正则：高亮多个相似关键词，如京东、京东物流、京东商城…

京东是中国一家自营式B2C购物网站，创始人刘强东担任京东集团CEO。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部。2013年正式获得虚拟运营商牌照。2016年6月与沃尔玛达成深度战略合作，1号店并入京东。2017年1月4日，中国银联宣布

一只懒虫 / 0评论 2019-06-26

javascript实现代码高亮

Syntax highlighting is very important especially when we want to show our code example on the blog. By enabling the syntax highl

Luffyying / 0评论 2013-10-01

通过javascript对html里面关键词高亮显示

通过javascript对html里面内容进行高亮显示， 可以同时高亮多个关键字， 每个关键字以不同的颜色展示。* @param {} keywords 关键字， 多个关键字可以通过空格隔开， 其中每个关键字会以一种颜色显式

韩道琦 / 0评论 2013-07-02

Hibernate Search 之 结果集高亮

使用Hibernate Search方便是方便，可是找出来的结果，都是一个个的实体。一开始走了弯路，按照以前直接用 lucene 的经验，打算自己。找到 QueryHits，然后对 QueryHits的结果进行逐个的高亮。幸好及时搜索了一下，对我帮助。当然

TomasEdision / 0评论 2010-01-22