jquery实现表格的隔行变色

最新推荐文章于 2023-11-14 19:48:16 发布

拼GO

最新推荐文章于 2023-11-14 19:48:16 发布

阅读量1k

点赞数

分类专栏： jquery学习文章标签： jquery function javascript xhtml border html

本文链接：https://blog.csdn.net/wxlhlh001/article/details/7381014

版权

jquery学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){
	

//----------------处理表格的隔行变色---------------

		var oldcolor="";
		$("tr").each(function(index,domEle){
		
		if(index%2==0){
			$(domEle).css("background-color","red");	
		}else{
			$(domEle).css("background-color","yellow");	
		}
	})
	.hover(function(){
			 oldcolor=$(this).css("background-color");
			//设置新的样式
			$(this).css("background","#999");		
	},function(){
		
			$(this).css("background-color",oldcolor);	
	})





	
})


</script>

</head>

<body>

<table width="400" height="200" border="1">
  <tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>手机</td>
    <td>qq</td>
  </tr>
  <tr>
    <td>一</td>
    <td>男</td>
    <td>12</td>
    <td>13373109323</td>
    <td>418287613</td>
  </tr>
  <tr>
    <td>二</td>
    <td>女</td>
    <td>13</td>
    <td>15933971909</td>
    <td> </td>
  </tr>
  <tr>
    <td>三</td>
    <td>女</td>
    <td>14</td>
    <td>15933971909</td>
    <td> </td>
  </tr>
  <tr>
    <td>四</td>
    <td>女</td>
    <td>15</td>
    <td>15933971909</td>
    <td>15933971909</td>
  </tr>
  <tr>
    <td>五</td>
    <td>男</td>
    <td>23</td>
    <td>15933971909</td>
    <td> </td>
  </tr>
  <tr>
    <td>六</td>
    <td>女</td>
    <td>23</td>
    <td>15933971909</td>
    <td> </td>
  </tr>
  <tr>
    <td>七</td>
    <td>男</td>
    <td>21</td>
    <td>15933971909</td>
    <td>15933971909</td>
  </tr>
  <tr>
    <td>八</td>
    <td>女</td>
    <td>22</td>
    <td>15933971909</td>
    <td>15933971909</td>
  </tr>
  <tr>
    <td>九</td>
    <td>男</td>
    <td>22</td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

拼GO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现表格的隔行变色

无标题文档$(document).ready(function(){ //----------------处理表格的隔行变色--------------- var oldcolor=""; $("tr").each(function(index,domEle){ if(index%2==0){ $(domEle).css("ba
复制链接

扫一扫