js实现隔行变色-------Day40
版权声明:本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/marSmile_tbo/article/details/31837367
就这样開始了自己的第二个项目,业绩员考评系统,一进入项目组,首先要開始的。又是这痛苦的界面设计,全然不能改变现有的模板,仅仅能在现有基础上进行发挥,我可怜的审美在这狭小的空间里突然就这样无能为力了。好吧,总有些地方还是须要加些效果的。像这样的隔行变色,不就非常有用嘛。
table在这个div+css肆虐的时代有些没落了,但是碰到多列数据显示时,它仍旧有着无法比拟的方便,我们先简单写下一个来
<table id="tb" width="900px;" border="1">
<tbody>
<tr>
<td>213</td>
<td>234</td>
</tr>
<tr>
<td>213</td>
<td>234</td>
</tr>
<tr>
<td>213</td>
<td>234</td>
</tr>
<tr>
<td>213</td>
<td>234</td>
</tr>
<tr>
<td>213</td>
<td>234</td>
</tr>
</tbody>
</table>
这样我们来看一下效果,这里加了border来方便查看
然后我们再通过javascript实现隔行变色
<script type="text/javascript">
window.onload=function(){
var tb=document.getElementById("tb");//获取table对象
var tbody=tb.getElementsByTagName("tbody")[0];//获取table里面的tbody部分
var trs=tbody.getElementsByTagName("tr");//获取tbody部分的全部行
for(var i=0;i<trs.length;i++){
if(i%2==0){//判定可以被2整除的。即偶数行的颜色为灰色
trs[i].style.background="#ccc";//对应的这一行,对象的style的设定
}
}
};
</script>
这里我们再来看一下效果
就这样,一个漂亮的隔行变色就是实现了,这个貌似面试题中常会出现吧,毕竟是比較基础的东西,但是我如今才学会,啊,罪过罪过.....
每一刻都是崭新的,加油
js实现隔行变色-------Day40的更多相关文章
- 使用webpack打包js文件(隔行变色案例)
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- JS实现隔行变色,鼠标移入高亮
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- js实现隔行变色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...
- 隔行变色---简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- HTML系列:js和css多种方式实现隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS实现表格隔行变色
用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...
- 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
随机推荐
- 2018.09.23 bzoj3143: [Hnoi2013]游走(dp+高斯消元)
传送门 显然只需要求出所有边被经过的期望次数,然后贪心把边权小的边定城大的编号. 所以如何求出所有边被经过的期望次数? 显然这只跟边连接的两个点有关. 于是我们只需要求出两个点被经过的期望次数. 对于 ...
- yii2 内置事件
1.yii2系统登录 const EVENT_BEFORE_LOGIN = 'beforeLogin'; //登录前 const EVENT_AFTER_LOGIN = 'afterLog ...
- IntelliJ IDEA 2017版 编译器使用学习笔记(三) (图文详尽版);IDE快捷键使用
一.列操作 功能:操作多行列执行相同的功能,达到一次修改多行同类型数据的情况,如图: Json字符串,转为枚举类的字段: 首先进行,快捷键一行快速操作 1.选中命令,s ...
- select自定义下拉选择图标
闲言少叙: 上CSS: appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; back ...
- GitBash入门
转载自:http://www.cnblogs.com/randomsteps/p/5415116.html 作为一个初学者,我是跟着廖学峰老师的官方博客学习,这里只是做个笔记,哈哈,关于git的历史. ...
- (KMP)Oulipo -- poj --3461
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=92486#problem/B http://poj.org/problem?id=3461 ...
- (网络流 模板 Edmonds-Karp)Drainage Ditches --POJ --1273
链接: http://poj.org/problem?id=1273 Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total ...
- Billman_ford货币升值——正权回路
2240和1860那个题目很像啊 都是问货币能不能增多,钻社会制度得空子啊哈哈 唯一不同得是你的起点是任意一个点,这个比较麻烦了,多了一层循环嘞 处理货币名可以用map分配id 然后就是老套的Bill ...
- Code Review Checklist and Guidelines for C# Developers
Checklist1. Make sure that there shouldn't be any project warnings.2. It will be much better if Code ...
- Spring Boot 应用系列 2 -- Spring Boot 2 整合MyBatis和Druid
本系列将分别演示单数据源和多数据源的配置和应用,本文先演示单数据源(MySQL)的配置. 1. pom.xml文件配置 需要在dependencies节点添加: <!-- MySQL --> ...