JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色
构建界面
界面HTML代码
<style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border-collapse: collapse;}#data{width: 600px;}#data th{background: aquamarine;color: white;}
</style><table id="data"><thead><tr><th>姓名</th><th>工资</th><th>入职时间</th><th>操作</th></tr></thead><tbody><tr><td>Tom</td><td>$3500</td><td>2015-8-20</td><td><button type="button">删除</button></td></tr><tr><td>Jack</td><td>$3200</td><td>2017-12-6</td><td><button type="button">删除</button></td></tr><tr><td>Jayvee</td><td>$6500</td><td>2012-6-12</td><td><button type="button">删除</button></td></tr><tr><td>Smith</td><td>$6300</td><td>2006-6-27</td><td><button type="button">删除</button></td></tr><tr><td>Mary</td><td>$1230</td><td>2018-3-2</td><td><button type="button">删除</button></td></tr><tr><td>Tom</td><td>$4200</td><td>2005-8-20</td><td><button type="button">删除</button></td></tr><tr><td>Tom</td><td>$3600</td><td>2015-9-8</td><td><button type="button">删除</button></td></tr></tbody>
</table>
使用 HTML 方式查找元素
首先在 HTML 界面添加样式
.blue{background: bisque;}
编写JavaScript脚本文件
// 查找所有的行,各行变色 假如偶数行变色
// 查找 tbody 中所有的 tr,然后隔行变色。
// 使用 HTML方式查找元素。var table = document.getElementById("data");
var tbody = table.getElementsByTagName("tbody")[0];
var tr = tbody.getElementsByTagName("tr");
for (var i = 0, len = tr.length; i < len; i++) {if (i % 2 == 1) {tr[i].className="blue";}
}
使用选择器查找
// 使用选择器查找
var trs = document.querySelectorAll("#data tbody tr:nth-child(2n)")
for (var i = 0; i < trs.length; i++) {trs[i].className = "blue"
}
案例完整代码
HTML
<style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border-collapse: collapse;}#data{width: 600px;}#data th{background: aquamarine;color: white;}.blue{background: bisque;}/*css方式隔行变色*//*#data tbody tr:nth-child(even){*//*background: bisque;*//*}*//*#data tbody tr:nth-child(2n){*//*background: bisque;*//*}*/</style><table id="data"><thead><tr><th>姓名</th><th>工资</th><th>入职时间</th><th>操作</th></tr></thead><tbody><tr><td>Tom</td><td>$3500</td><td>2015-8-20</td><td><button type="button">删除</button></td></tr><tr><td>Jack</td><td>$3200</td><td>2017-12-6</td><td><button type="button">删除</button></td></tr><tr><td>Jayvee</td><td>$6500</td><td>2012-6-12</td><td><button type="button">删除</button></td></tr><tr><td>Smith</td><td>$6300</td><td>2006-6-27</td><td><button type="button">删除</button></td></tr><tr><td>Mary</td><td>$1230</td><td>2018-3-2</td><td><button type="button">删除</button></td></tr><tr><td>Tom</td><td>$4200</td><td>2005-8-20</td><td><button type="button">删除</button></td></tr><tr><td>Tom</td><td>$3600</td><td>2015-9-8</td><td><button type="button">删除</button></td></tr></tbody>
</table><script src="mJS.js"></script>
JavaScript
// // 查找所有的行,各行变色 假如偶数行变色
// // 查找 tbody 中所有的 tr,然后隔行变色。
// // 使用 HTML方式查找元素。
//
// var table = document.getElementById("data");
// var tbody = table.getElementsByTagName("tbody")[0];
// var tr = tbody.getElementsByTagName("tr");
// for (var i = 0, len = tr.length; i < len; i++) {
// if (i % 2 == 1) {
// tr[i].className="blue";
// }
// }// 使用选择器查找
var trs = document.querySelectorAll("#data tbody tr:nth-child(2n)")
for (var i = 0; i < trs.length; i++) {trs[i].className = "blue"
}
效果图
JavaScript 实现表格隔行变色相关推荐
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- 利用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 ...
- onmouseover+onmouseout :表格隔行变色
表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- 前端-table表格隔行变色
table表格隔行变色 作为一个后端的我,在某公司无前端工程师时,系统那体验自己用起来都想骂人了.今天就纪录一下,自己在后台经常用到的一个小玩意. :nth-child(): 定义和用法 :nth-c ...
- 实现表格隔行变色的方法
css实现表格隔行变色: <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
最新文章
- 想“看见”高性能计算嘛?戳这里开始
- stella forum v1.2 用例分析
- 华为任正非谈退休:思维跟不上的时候退,目前是才思泉涌的状态
- labuladong的算法小抄pdf_真漂亮!这份GitHub上爆火的算法面试笔记,助你圆满大厂梦...
- django-allauth定制模板(转载)
- 如果你不喜欢Windows 11开始菜单,还可以用注册表换回Windows 10样式
- KafkaAPI实战
- 基于依赖统计的方法——TPDA
- size_t和size_type类型
- P12 | N-path filter (ISSCC2021 JSSC-2011-03)
- 比色皿洗涤不干净会造成很大实验误差
- 5G无线关键技术 — 高频段信号传输技术
- kit框架详解(基于go-kit)
- ubuntu18.04/linux安装ffmpeg 遇到的错误
- 【SpringBoot学习】39、SpringBoot 集成 wxJava 微信小程序:订单支付
- 黑客攻防技术宝典(五)
- SLAM中线特征的参数化表示方法/重投影/初始化方法
- Python基于RCNN&CTC的文本识别系统(源码&部署教程)
- Two thousand twenty one -- March -- twenty one -- Sunday
- 一行代码解决scp在Internet传输慢的问题