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( ...
随机推荐
- RTSP/RTP 媒体传输和控制协议
1 前言 本文档主要描述了 NewStream Vision 系统中前端视频服务器(DVR, 网络摄像机), 中心转发服务器以及客户端之间的多媒体通信以及控制协议. 本协议主要基于标准的 IETE 的 ...
- MVC的一些常用特性，持续更新中。。。
1. @MvcHtmlString.Create("<option value='1'>火星</option>") //渲染Html
- Android Span的简单使用
Spanable中的常用常量: Spanned.SPAN_EXCLUSIVE_EXCLUSIVE --- 不包含start和end所在的端点 (a,b) Span ...
- idea报错：Please, configure Web Facet first!
https://blog.csdn.net/handsomepig123_/article/details/87257689 转载
- Python更换pip源，更换conda源
更换pip源: 1.在windows文件管理器中,输入 %APPDATA% 2.在该目录下新建pip文件夹,然后到pip文件夹里面去新建个pip.ini文件 3.在新建的pip.ini文件中输入以下内 ...
- AARRR：互联网创业者一定要掌握的指标
创业公司如何做数据分析?网站分析工具里的指标千百种,到底要从哪些数据入手呢?除了流量跟转换率,还有哪些数据跟公司成长有关呢?或许可以从了解AARRR Metrics开始.AARRR Metrics是由 ...
- C语言-实现整数倒序输出
Action() { //实现一个3位数的倒序输出(123输出321) int n; int m=321; n=fun_mod(m,n); lr_output_message("%d&quo ...
- 20130912.Windows下常用命令的使用（不断更新）
Win+R================================ cmd => 命令行 lpksetup => 弹出安装或者卸载Windows显示语言 ipconfig => ...
- SpringCloud 构建微服务架构-练习
我使用的springboot的版本为2.0.2.RELEASE,这里概念性的东西我就不粘贴复制了,百度一下 都是 一.启动Eureka注册中心服务 1.新建springboot项目,pom.xml配置 ...
- dubbo 部分 配置的关系-dubbo github 官方案例
1.dubbo 有一个 dubbo.properties 作为默认配置 默认配置可以在不添加新的配置的前提下使用dubbo dubbo.properties 的内容(来自 https://github ...