JS实现表格高亮显示
前言:本文内容为表格高亮显示功能,分为两种,第一种各行换色。第二种鼠标移动到对应行,高亮显示
各行换色
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>window.onload=function(){var tabs= document.getElementById("tabl");var len= tabs.tBodies[0].rows.length;for (var i=0;i<len;i++) {if(i%2==0){tabs.tBodies[0].rows[i].style.backgroundColor="yellow";}}}</script></head><body><table id="tabl" border="1px" width="500px" height="60px" cellpadding="1px" align="center" id="tabl"><thead><tr align="center"><th><font size="3">编号</font></th><th><font size="3">姓名</font></th><th><font size="3">年龄</font></th></tr></thead><tbody><tr><td>01</td><td>张三</td><td>员工</td></tr><tr><td>02</td><td>王五 </td><td>员工</td></tr> <tr><td>03</td><td>李小二</td><td>电影</td></tr> <tr><td>04</td><td>王麻子 </td><td>视频 </td></tr> <tr><td>06</td><td>二狗子</td><td>狗屎</td></tr> <tr><td>07</td><td>小儿 </td><td>老板 </td></tr></tbody></table></body>
</html>
鼠标移动高亮显示
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格隔行换色</title><script>//基础模型
/* function mouseover(){document.getElementById("tab1").style.backgroundColor="red";}function mouseout(){document.getElementById("tab1").style.backgroundColor="white";}*/function changeColor(id,flag){if(flag=="over"){document.getElementById(id).style.backgroundColor="yellow";}else{document.getElementById(id).style.backgroundColor="white";}}</script></head><body><table border="1" width="500" height="50" align="center" ><tr ><th>编号</th><th>姓名</th><th>年龄</th></tr><tr onmouseover="mouseover()" onmouseout="mouseout()" id="tab1"><td>1</td><td>张三</td><td>22</td></tr><tr onmouseover="changeColor('tab2','over')" onmouseout="changeColor('tab2','out')" id="tab2"><td>2</td><td>李四</td><td>25</td></tr ><tr onmouseover="changeColor('tab3','over')" onmouseout="changeColor('tab3','out')" id="tab3"><td>3</td><td>王五</td><td>27</td></tr><tr onmouseover="changeColor('tab4','over')" onmouseout="changeColor('tab4','out')" id="tab4"><td>4</td><td>赵六</td><td>29</td></tr><tr onmouseover="changeColor('tab5','over')" onmouseout="changeColor('tab5','out')" id="tab5"><td>5</td><td>田七</td><td>30</td></tr><tr onmouseover="changeColor('tab6','over')" onmouseout="changeColor('tab6','out')" id="tab6"><td>6</td><td>汾九</td><td>20</td></tr></table></body>
</html>
————————————————————上文出自胖胖,转载请附带原文链接
若有错误,请在下方评论,作者会及时更改!!!
后续更新自学的方法,以及java知识总结
我是哪怕前路坎坷,也不愿负年轻的菜狗,自学之路,共勉
JS实现表格高亮显示相关推荐
- js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)
***************************************************************** js动态添加表的列,并在列中添加控件的方法<html> ...
- jquery.dataTable.js 绘制表格使用详解
dataTable.js绘制表格真的是很不错,下面看看如何应用吧. 先导入dataTable.js的库吧! 定义html页面. <div><div id="result&q ...
- vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 选择 用户名 学号 班级 操作 {{item.User ...
- php对表格的处理,JavaScript_js处理表格对table进行修饰,js处理表格 1、行颜色间隔显示 - phpStudy...
js处理表格对table进行修饰 js处理表格 1.行颜色间隔显示 css样式:两个选择器 .one{ background-color:#33ffcc; } .two{ backgound-colo ...
- (转)用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
- html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法 本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
- 基于Vue.js的表格分页组件
转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
- JS打印表格时边框缺失问题
问题描述: JS打印表格时边框缺失问题 项目场景:window.print()打印网页,预览中,表格的边框缺失部分或全部 原因分析: 首先,怀疑是设置了border-collapse:collapse ...
- html设置表格点击变色,js实现表格变色点击行颜色改变
forword js实现表格变色点击行颜色改变 table table { border-top:1px solid black; border-left:1px solid b ...
最新文章
- 2012 ARM嵌入式开发应用研讨会杂谈
- 为什么“晚上9点钟洗澡的大学生成绩更好”?
- 通过练习题学习磁盘知识
- Android View之间的触摸事件传递图
- NET问答: C# 中有哪些 HttpPost 工具包
- 一篇文章搞懂数据仓库:三范式与反范式
- 查询ElasticSearch:用SQL代替DSL
- 应用程序错误 应用程序发生异常w3wp.exe
- centos7.0查看IP
- 编译c语言源程序得到的目标文件可以直接在dos环境中运行,c语言练习题一.doc
- SSH连接linux时,长时间不操作就断开的解决方案(增强版)
- winform 拖动无边框窗体(调用Windows API)
- Oracle 11g 字符集修改
- 深度学习之VGG19模型简介
- Selenium 爬取微信公众号文章并保存为pdf与长图片(2022-06-09更新版)
- c语言经典面试题(附答案)
- 【洛谷】P3537 [POI2012]SZA-Cloakroom
- Windows 删库跑路(破坏系统的功能)
- 车载OS的战场:万亿美金入口之争
- 原生js获取指定标签的父元素
热门文章
- 南京Python培训机构排名
- 代数余子式之和怎么算_11.初中数学:xy4x+6y5,怎么因式分解?分组配方法再平方差...
- Android模拟器更改DNS联网问题
- HTML+CSS+JS仿京东购物车页面动态效果
- OIS输入系统-1_OIS简介与使用
- 数据库题目 - 查找重复的电子邮箱
- c++运用继承多态类和对象指针重载设计的双卡通讯录管理系统
- const 修饰变量
- 《不困于心,不惑于情,真正的勇敢是懦弱,最高的智慧是愚拙-雾满拦江》
- Ubuntu使用docker安装elasticsearch与Kibana