版权声明:本文为博主原创文章。未经博主同意不得转载。 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的更多相关文章

  1. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  2. JS实现隔行变色,鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  3. js实现隔行变色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  5. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  6. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  7. HTML系列:js和css多种方式实现隔行变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  9. 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

随机推荐

  1. 何时开始phonics学习及配套阅读训练zz

    引子:自从11月份俱乐部第一批孩子开始英文阅读,到现在三.四个月的时间过去了.很多孩子从不知道怎么读绘本甚至排斥英语,到现在能很投入地看原版书, 有些甚至主动地去寻找拼读规律.我家小宝目前也从前期的阅 ...

  2. spring3 hibernate4整合后无法查询数据库

    spring3和hibernate4整合后无法查询数据库,一方面是因为已经spring3中没有对hibernate4 HibernateTemplate的支持,另外一个就是需要在hibernate的配 ...

  3. Redis配置总结

    一:常用配置 1.bind,格式为bind 127.0.0.1:这个是很重要的配置,如果bind 127.0.0.1则外部网络是访问不了的(如果外部网络要访问还要开放端口) 2.port,格式为por ...

  4. event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

    先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...

  5. 20155339 2016-2017-2 《Java程序设计》第9周学习总结

    20155339 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC入门 JDBC简介 JDBC全名Java DataBase Connectivity ...

  6. MVC2 阻止公共方法被调用

    阻止公共方法被调用 using System.Web.Mvc; namespace MvcApplication1.Controllers { public class WorkController ...

  7. 学习Spring Data JPA

    简介 Spring Data 是spring的一个子项目,在官网上是这样解释的: Spring Data 是为数据访问提供一种熟悉且一致的基于Spring的编程模型,同时仍然保留底层数据存储的特​​殊 ...

  8. Ajax异步请求阻塞情况的解决办法

    最近使用ExtJs4的mvc模式在开发了在线漫画的后台,因为异步请求比较多,有的回应时间长,有点短.我发现在多次并发的情况下,会造成阻塞的情况.也就是说如果回应时间长的请求还在进行中,短的请求却被挂起 ...

  9. ASP.NET控制HTTP缓存

    请求   响应 If-Modified-Since Last-Modified If-None-Match ETag 至于Expires和Cache-Control 附上几张高手的图 Etag 在使用 ...

  10. (zxing.net)解码

    //图片路径 string imgPath = @"D:\barcode.png"; //解码通用类 IBarcodeReader reader = new BarcodeRead ...