JavaScript 表格隔行变色

单隔行变色:

<html>
<head>
<meta charset="utf-8">
<title>表单隔行变色</title>
<script>
window.onload=function ()
{
    var oTab=document.getElementById('tab1');


    //alert(oTab.rows.length);
    for(var i=0;i<oTab.tBodies[0].rows.length;i++)
    {
    if(i%2)
    {
    oTab.tBodies[0].rows[i].style.background='';
    }
    else
    {
    oTab.tBodies[0].rows[i].style.background='#CCC';
    }
}
};
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>

表格隔行变色和鼠标移入高亮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JavaScript实现隔行变色的表格</title>
<style>
<!--
.datalist{
    border:1px solid #007108; /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse; /* 边框重叠 */
    background-color:#d9ffdc; /* 表格背景色 */
    font-size:14px;
}
.datalist th{
    border:1px solid #007108; /* 行名称边框 */
    background-color:#00a40c; /* 行名称背景色 */
    color:#FFFFFF; /* 行名称颜色 */
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:12px; padding-right:12px;
    text-align:center;
}
.datalist td{
    border:1px solid #007108; /* 单元格边框 */
    text-align:left;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
    background-color:#a5e5aa; /* 隔行变色 */
}
-->
</style>
<script language="javascript">
window.onload = function(){ //隔行变色代码
    var oTable = document.getElementById("oTable");
    for(var i=0;i<oTable.rows.length;i++){
    if(i%2==0) //偶数行时
        oTable.rows[i].className = "altrow";
		}
}
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr>
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr>
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr>
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr>
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr>
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr>
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr>
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr>
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>

格各行变色和高亮

html中，我们经常会用到table布局；有时候需要实现指定单元格，当鼠标移动到上面的时候，该单元格背景变色，不是该行背景变色，也不是仅仅文字的背景变色；

html的文件结构大家都是知道的了，总体分为head和body部分

我们要实现变色，在head部分实现格式

<style>

.tablex {border-collapse: collapse;}

.tablex tr {}

.tablex tr td {text-align:center; line-height:30px;}

.tablex tr td:hover { background-color:#f00; color:#fff;}

</style>

然后在body部分，使用table时候，注明class="tablex".这样的话，就实现了我们所说的效果了。

附上完整代码：

<html>

<head>

<title>测试鼠标移到到表格单元格背景颜色改变的</title>

<style>

.table1 {border-collapse: collapse;}

.table1 tr {}

.table1 tr td {text-align:center; line-height:30px;}

.table1 tr td:hover { background-color:#006030; color:#006030;}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

在任何一个浏览器中运行，效果如下

南大盛联20年来一直致力于高端IT培训--打造高级软件人才实战培训专家，学生对我们的认可是我们一直前进的动力；项目团队全球招聘，特聘来自海外的老师进行任教，采用100%商业项目进行实战培训，线上线下同步进行。

课程全部紧随市场需求进行设计，并且动态进行调整；7天免费试听，0首付开始学习，学完后进行100%推荐就业，不满意工作岗位2次推荐。

选定一个平台，认识一群志同道合的朋友，你的未来人生路必定不一样。

目前已经开设下面这些培训项目

Java培训

安卓培训

JavaWeb培训

Linux培训

云服务器布置培训

HTML5培训

SEO培训

视频剪辑培训

UI培训

欢迎您们分享给自己愿意分享的朋友，大家一起来进步；相互转告，咨询，学习。

南大盛联培训理念：我懂，我也能让你懂。

在线咨询

上一篇：这些iframe跨域解决方案你需要了解一下，以后不应该再是你的盲区
下一篇：这一款开源免费的富文本编辑器，是值得推荐的-Quill

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 表格隔行变色

html中，我们经常会用到table布局；有时候需要实现指定单元格，当鼠标移动到上面的时候，该单元格背景变色，不是该行背景变色，也不是仅仅文字的背景变色；

您的项目需求