JavaScript学习——表格的隔行换色+高亮显示
1、案例一：我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：
1）新标签
<thead> //表头
<tr>
<th></th>
</tr>
</thead>
<tbody> //表格内容
<tr>
<td></td>
9 </tr>
</tbody>
2)步骤分析
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写函数(获取表格)
第三步：获取tbody里面的行数(长度rows.length)
第四步：对tbody里面的行进行遍历
第五步：获取奇数行和偶数行(角标对2取余)
第六步：分别对奇数行和偶数行设置背景颜色(.style.backgroundColor)
3)代码实现（window.onload设置隐名函数）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<script>
window.onload=function(){
//1.获取表格
var tblEle=document.getElementById("tbl");
//2.获取表格中tbody里面的行数（长度）这里的0指的是第一个tbody
var len=tblEle.tBodies[0].rows.length;
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.background="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.background="gold";
}
}
}
</script>
</head> <body>
<table border="1px" width="500px" height="50px" align="center" id="tbl">
<thead>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
在谷歌浏览器内运行，得到需求中的效果。
2、案例二：实现一个表格的高亮显示
1）JS事件
onmouseover()鼠标移入事件。鼠标从外部移入到当前元素时触发。
onmouseout()鼠标移出事件。鼠标从当前元素移出时触发。
2）步骤分析：
第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
第二步：获取鼠标移上去的那行，对其设置背景颜色
3）代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格高亮显示</title>
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.background="pink";
}else if(flag=="out"){
document.getElementById(id).style.background="white";
}
}
</script>
</head> <body>
<table border="1px" width="500px" height="50px" align="center" id="tbl">
<thead>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
在谷歌浏览器内运行，实现的效果就是光标移动到某一行，这一行就变成粉色，移开就显示白色。
JavaScript学习——表格的隔行换色+高亮显示的更多相关文章
- jQuery_完成表格的隔行换色
表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...
- Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 使用JS创建表格以及隔行换色（包括隔N行换色）
<html> <head> <title></title> <style> table{ width:800px; border-colla ...
- JS案例四：表格的隔行换色以及高亮显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 模块：jquery实现表格的隔行换色
效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现 ...
- Angular 学习笔记——ng-repeat 隔行换色
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- js课程 4-11 表格如何实现隔行换色
js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...
- javascript 表格隔行换色
用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
随机推荐
- BZOJ4819: [Sdoi2017]新生舞会(01分数规划)
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1029 Solved: 528[Submit][Status][Discuss] Descripti ...
- mock non-virtual methods
生产代码中有很多类方法是非虚的,而为了在Gtest中解除这些非必需的依赖,可以通过Gmock的mock non-virtual methods using templates方法来达到目的.在此之前, ...
- UVa 11520 Fill in the Square
题意:给出 n*n的格子,把剩下的格子填上大写字母,使得任意两个相邻的格子的字母不同,且从上到下,从左到右的字典序最小 从A到Z枚举每个格子填哪一个字母,再判断是否合法 #include<ios ...
- ZBrush中如何把模型的细节映射到低模上
我们在ZBrush®雕刻模型的时候,发现模型布线不利于雕刻,这使我们不得不对模型进行重建细分,而重建细分之后的模型细节已经没有了,这个时候我们就需要把原来高模的细节映射到新的模型上面. 接下来我们介绍 ...
- 路飞学城Python-Day23（practise）
本章总结 练习题 什么是C/S架构? 互联网协议是什么?分别介绍五层协议中每一层的功能? 基于tcp协议通信,为何建立链接需要三次握手,而断开链接却需要四次挥手 为何基于tcp协议的通信比基于udp协 ...
- MySQL 关闭 binlog 日志
[关闭binlog日志] 1.vim /etc/my.cnf 注释如下内容: #log-bin=mysql-bin #binlog_format=mixed #server-id = 1 #expir ...
- 一些BFC
我们可能会遇到这样的一些问题,比如:子元素浮动,父元素高度塌陷:父元素跟随子元素一起移动等 这是我们可以通过触发BFC来解决这样的问题. BFC为"块级格式化上下文".它是一个独立 ...
- [AtCoder Regular Contest 083] Bichrome Tree
树形DP. 每个点有两个属性:黑色点的权值和,白色点权值和,一个知道另一个也一定知道. 因为只要子树的和它相等的点得权值和不超过x[u],u点的权值总能将其补齐. 设计状态f[u]表示以u为根的子树, ...
- 转载一遍比较好的,django2.1搭建博客教程
非常感谢这位博主,找了几个星期终于找到了 https://www.dusaiphoto.com/article/article-detail/4/
- 安装SSH、配置SSH无密码登录 ssh localhost
集群.单节点模式都需要用到 SSH 登陆(类似于远程登陆,你可以登录某台 Linux 主机,并且在上面运行命令),Ubuntu 默认已安装了 SSH client,此外还需要安装 SSH server ...