<table id="datatable">
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
</table>
<script>
function showtable(){
var color1 = "rgb(234,240,255)";
var color2 = "rgb(255,255,255)";
var bgColor = "rgb(255,255,193)";
var trs = document.getElementById("datatable").getElementsByTagName("tr");
for (var i=0;i<trs.length-1;i++){
if (i%2==0) {
trs[i].style.backgroundColor=color1;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color1;
}
} else {
trs[i].style.backgroundColor=color2;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color2;
}
}
}
}
showtable()
</script>

Table隔行变色的JavaScript代码的更多相关文章

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

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

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

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

  3. css 实现table 隔行变色

    <html> <head> <title>Member List</title> <style> <!-- .datalist{ bo ...

  4. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  5. jquery学习笔记(4)--实现table隔行变色以及单选框选中

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. table隔行变色

    table tr:nth-child(2n) {         background: #EEF8F0;     }     table tr:nth-child(2n+1) {         b ...

  7. CSS3 设置 Table 隔行变色

    table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;}

  8. table隔行变色【转】

    table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-chil ...

  9. jquery table 隔行变色+点谁谁变色

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. H264的coded_block_pattern编码块模式

    1 词汇约定 CodedBlockPatternLuma:一个宏块的亮度分量的coded_block_pattern CodedBlockPatternChroma:一个宏块的色度分量的coded_b ...

  2. H264帧内预测模式编号的编码过程

    1 本文词汇约定 宏块:H264编码基本单元,16x16像素(或采样)构成 块:   由8x8像素(或采样)构成的单位 子块:   由4x4像素(或采样)构成的单位 2 帧内亮度预测模式 H264规范 ...

  3. QT 报错:Project ERROR: Xcode not set up properly. You may need to confirm the license agreement by running /usr/bin/xcodebuild.

    1.打开终端,输入指令并按回车键: sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer 2.如果电脑设置有密码,终 ...

  4. 8VC Venture Cup 2017 - Elimination Round

    传送门:http://codeforces.com/contest/755 A题题意是给你一个数字n,让你找到一个数字m,使得n*m+1为合数,范围比较小,直接线性筛出1e6的质数,然后暴力枚举一下就 ...

  5. 常用ARM指令集及汇编_破解

    链接地址:http://pan.baidu.com/s/1hsNtxJm

  6. ThinkPHP批量添加数据和getField()示例

    批量添加数据 // 批量添加数据 $User = M('users'); $dataList[] = array('name'=>'thinkphp','email'=>'thinkphp ...

  7. BCTF Web Code–考脑洞,你能过么?

    BCTF Web Code–考脑洞,你能过么? 1)打开链接,是一张图片 根据URL特点推断可能是有文件包含漏洞 2) 将jpg参数修改成index.php,查看源代码,发现base64编码后的代码 ...

  8. 阻塞与非阻塞、同步与异步 I/O模型

    I/O模型 Linux 下的五种I/O模型 阻塞I/O(blocking I/O) 非阻塞I/O (nonblocking I/O) I/O复用(select 和poll) (I/O multiple ...

  9. MITMF

    一. 安装 项目地址:https://github.com/byt3bl33d3r/MITMf 需要自行手动安装python-nfqueue,pefile模块 sudo apt-get install ...

  10. 图的连通性:有向图强连通分量-Tarjan算法

    参考资料:http://blog.csdn.net/lezg_bkbj/article/details/11538359 上面的资料,把强连通讲的很好很清楚,值得学习. 在一个有向图G中,若两顶点间至 ...