JavaScript|表格隔行变色(可作模板copy)
本博文源于js基础,主要实现表格的隔行变色。
题目再现
想让表格产生隔行变色的效果。
解题思路
若手动给所有的奇数行或者偶数行设置某个类名,则显地太麻烦。使用js可以简化这种重复工作。
测试效果
附上js+css代码
js代码+css代码直接copy,即用即所得!
<script type="text/javascript">let oTrs = document.getElementsByTagName("tr");for(let i =0;i<oTrs.length;i+=2) {oTrs[i].className = "spec";}
</script>
<style>table,table tr th, table tr td {border:1px solid #0094ff;}table { width: 400px; line-height: 25px; text-align: center; border-collapse: collapse;} table tr.spec {background-color: gold;}
</style>
完整代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,table tr th, table tr td {border:1px solid #0094ff;}table { width: 400px; line-height: 25px; text-align: center; border-collapse: collapse;} table tr.spec {background-color: gold;} </style></head><body><table ><tr><td>js</td><td>js</td><td>js</td><td>js</td><td>js</td></tr><tr><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td></tr><tr><td>java</td><td>java</td><td>java</td><td>java</td><td>java</td></tr><tr><td>html</td><td>html</td><td>html</td><td>html</td><td>html</td></tr><tr><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td></tr><tr><td>js</td><td>js</td><td>js</td><td>js</td><td>js</td></tr><tr><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td></tr><tr><td>java</td><td>java</td><td>java</td><td>java</td><td>java</td></tr><tr><td>html</td><td>html</td><td>html</td><td>html</td><td>html</td></tr><tr><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td><td>dsa</td></tr><script type="text/javascript">let oTrs = document.getElementsByTagName("tr");for(let i =0;i<oTrs.length;i+=2) {oTrs[i].className = "spec";}</script></table></body>
</html>
JavaScript|表格隔行变色(可作模板copy)相关推荐
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 构建界面 界面HTML代码 <style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border ...
- 利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
- jquery表格隔行变色
结果如下图: <!doctype html> <html> <head><meta http-equiv="content-type" c ...
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
- Python_day21--练习--点亮灯泡、表格隔行变色
一.点亮灯泡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- onmouseover+onmouseout :表格隔行变色
表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
最新文章
- C++ int与string的相互转换(含源码实现)
- [转]div 让文字或图片居中
- 不会Object.defineProperty你就out了
- 使用JavaScript中的示例编号MAX_VALUE属性
- android arcgis多变形边框颜色,ArcGIS制图技巧—边框的选择
- android打开sqlite数据库,Android:打开和关闭SQLite数据库
- 华为首次赶超苹果;拼多多遭调查;Google 计划推中国版搜索引擎 | 极客头条
- mysql中没having_MySQL中无GROUP BY直接HAVING的问题
- 【语音采集】基于matlab语音采集及处理【含Matlab源码 1737期】
- 使用DNSStager在DNS中隐藏Payload
- 在Excel中批量生成二维码标签,标签中可添加二维码或者条形码
- 成绩录取系统c语言,一个学生成绩管系统C语言源代码.doc
- docker编配和服务发现
- 精通 Python 网络爬虫:核心技术、框架与项目实战
- 计算机word的关闭怎么办,为什么我的计算机word文档打开和关闭缓慢
- 双稳态电路的两个稳定状态是什么_NE555集成电路--交替闪烁灯
- phpcms 下载数统计
- 实践使用bfile 数据类型
- 计算机房地板厚度,机房地板尺寸一般是多少?
- 赛效:安卓APP移动应用图标一键生成如何实现
热门文章
- 【多元统计分析】08.协方差阵的假设检验
- 检测屏幕.html,在线检测显示器屏幕尺寸
- 一个传播 Worm.Win32.Otwycal.c / Worm.Win32.Infei.a 的网站v2
- 亲测用APICloud打包vue项目
- python open encoding=utf-8_Python 文件操作中的读写模式:open(path, '-模式-',encoding='UTF-8')...
- LoadRunner 11(LR11) 下载链接及破解方法
- 快手程序员爆料:有大厂背书就是好,这就是光环效应
- ViewPager嵌套ViewPager后子ViewPager滑动不正常问题
- MySQL 获取所有库名、表名、字段名
- 7000字,讲透数据指标体系的建设