隔行变色，用jquery实现的

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<title>一行一行的换颜色</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<table>
<thead>
<tr>
<td>姓名</td>
<td>电话</td>
<td>地址</td>
</tr>
</thead>
<tbody>
<tr>
<td>Carrion Fly</td>
<td>Worldwide</td>
<td>gray</td>
</tr>
<tr>
<td>Office Fly</td>
<td>California, Bay Area</td>
<td>white</td>
</tr>
<tr>
<td>Common House Fly</td>
<td></td>
<td>brown</td>
</tr>
<tr>
<td>Horn Fly</td>
<td>Kansas</td>
<td>red</td>
</tr>
<tr>
<td>Face Fly</td>
<td></td>
<td>green</td>
</tr>
<tr>
<td>Stable Fly</td>
<td></td>
<td>black</td>
</tr>
<tr>
<td>Carrion Fly</td>
<td>Worldwide</td>
<td>gray</td>
</tr>
<tr>
<td>Office Fly</td>
<td>California, Bay Area</td>
<td>white</td>
</tr>
<tr>
<td>Common House Fly</td>
<td></td>
<td>brown</td>
</tr>
<tr>
<td>Horn Fly</td>
<td>Kansas</td>
<td>red</td>
</tr>
<tr>
<td>Face Fly</td>
<td></td>
<td>green</td>
</tr>
<tr>
<td>Stable Fly</td>
<td></td>
<td>black</td>
</tr>
</tbody>
</table>

<!--
这里是JS里的数组吗？

$(function(){
$("tr").each(function(i){   this.style.backgroundColor  =  ['#ccc','#fff'][i%2]   })  
  })

['#ccc','#fff'][i%2] //就这里这个。当然可以用tr:even 。

代码的过程是知道的， 对i%2取余数，要么为0要么为1，
所以 要么是['#ccc','#fff'][0] 要么是 ['#ccc','#fff'][1] ，
所以要么是#ccc,要么是#fff.

javascript数组可以这么定义 var array =['arr1','arr2'];
但记忆钟似乎不能 ['arr1','arr2'][0],['arr1','arr2'][1],这样写。

在JQ群理问了，他说是 JQ里把数组封装了。
才可以['arr1','arr2'][0],['arr1','arr2'][1],这样写。

说Javascript里要 这样写：
if(i%2){
this.style.backgroundColor='#ccc' ;
else 
this.style.backgroundColor='#fff';
}
晕了。

刚才自己写了个例子，证明自己是正确的。
<script>
  for(var i = 0;i<10;i++){
  alert(['1','2'][i%2]);
  }
</script>

嘿嘿。有时候太不相信自己了。
-->

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

隔行变色，用jquery实现的

分类

表格图层

描述

大家现在都喜欢用jQuery，那么今天无意发现了这个JQUERY版本的隔行换色，对原有使用了JQ的朋友来说，你只需两行代码就能实现这个功能啦，确实挺方便、实用。