隔行换色(1)分析

阿里 阅读:244 2020-02-19 18:23:07 评论: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>
<style type="text/css">
*{margin:0; padding:0;}
a{text-decoration:none; cursor:pointer; color: #222;}
table{ width:100%; line-height:30px; border:yellow solid; border-width:1px 0px 0px 1px; text-align:center;}
table td{ border:yellow solid; border-width:0px 1px 1px 0px;}
table th{ border:yellow solid; border-width:0px 1px 1px 0px; font-weight:900; color:blue;}

.one{ background:#C00; background:#D9EDE1; }
.two{ background:#09F; background:#ADD9C2; }
.three{ background:#039; background:#ccc;}
.four{ background:#FFF; }

</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){

$("tr").mouseover(function(){
$(this).addClass("four");
})
$("tr").mouseout(function(){
$(this).removeClass("four");
})
$("tr:first").addClass("three");
$("tr:last").addClass("three");
$("tr:even").addClass("one");
$("tr:odd").addClass("two");
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>号码</th>
<th>姓名</th>
<th>位置</th>
<th width="12%">身高(cm)</th>
<th width="12%">体重(kg)</th>
<th width="8%">年龄</th>
<th width="8%">球龄</th>
<th width="12%">薪资(万美元)</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td><a href="" target="_blank">勒布朗-詹姆斯</a></td>
<td>前锋</td>
<td>203</td>
<td>113.4</td>
<td>31</td>
<td>12</td>
<td>2,297</td>
</tr>
<tr>
<td>0</td>
<td><a href="" target="_blank">凯文-乐福</a></td>
<td>前锋/中锋</td>
<td>208</td>
<td>113.8</td>
<td>27</td>
<td>7</td>
<td>1,969</td>
</tr>
<tr>
<td>2</td>
<td><a href="" target="_blank">凯尔-欧文</a></td>
<td>后卫</td>
<td>190</td>
<td>87.5</td>
<td>24</td>
<td>4</td>
<td>1,641</td>
</tr>
<tr>
<td>4</td>
<td><a href="" target="_blank">伊曼-香珀特</a></td>
<td>锋卫摇摆人</td>
<td>195</td>
<td>99.8</td>
<td>25</td>
<td>4</td>
<td>899</td>
</tr>
<tr>
<td>9</td>
<td><a href="" target="_blank">钱宁-弗莱</a></td>
<td>前锋/中锋</td>
<td>210</td>
<td>115.6</td>
<td>33</td>
<td>10</td>
<td>781</td>
</tr>
<tr>
<td>5</td>
<td><a href="" target="_blank">J.R-史密斯</a></td>
<td>锋卫摇摆人</td>
<td>198</td>
<td>102.0</td>
<td>30</td>
<td>11</td>
<td>500</td>
</tr>
<tr>
<td>20</td>
<td><a href="" target="_blank">提莫菲-莫兹戈夫</a></td>
<td>中锋</td>
<td>215</td>
<td>124.7</td>
<td>29</td>
<td>7</td>
<td>495</td>
</tr>
<tr>
<td>13</td>
<td><a href="" target="_blank">特里斯坦-汤普森</a></td>
<td>前锋/中锋</td>
<td>205</td>
<td>107.9</td>
<td>25</td>
<td>4</td>
<td>389</td>
</tr>
<tr>
<td>30</td>
<td><a href="" target="_blank">邓台-琼斯</a></td>
<td>锋卫摇摆人</td>
<td>198</td>
<td>102.0</td>
<td>35</td>
<td>12</td>
<td>290</td>
</tr>
<tr>
<td>52</td>
<td><a href="" target="_blank">莫-威廉姆斯</a></td>
<td>后卫</td>
<td>185</td>
<td>89.8</td>
<td>33</td>
<td>12</td>
<td>210</td>
</tr>
<tr>
<td>24</td>
<td><a href="" target="_blank">理查德-杰弗森</a></td>
<td>小前锋</td>
<td>200</td>
<td>105.7</td>
<td>35</td>
<td>14</td>
<td>150</td>
</tr>
<tr>
<td>1</td>
<td><a href="" target="_blank">詹姆斯-琼斯</a></td>
<td>锋卫摇摆人</td>
<td>203</td>
<td>98.9</td>
<td>35</td>
<td>12</td>
<td>150</td>
</tr>
<tr>
<td>14</td>
<td><a href="" target="_blank">萨沙-考恩</a></td>
<td></td>
<td>210</td>
<td>117.9</td>
<td>31</td>
<td>7</td>
<td>128</td>
</tr>
<tr>
<td>0</td>
<td><a href="" target="_blank">乔-哈里斯</a></td>
<td>得分后卫</td>
<td>198</td>
<td>99.3</td>
<td>24</td>
<td>1</td>
<td>85</td>
</tr>
<tr>
<td>8</td>
<td><a href="" target="_blank">马修-德拉维多瓦</a></td>
<td>组织后卫</td>
<td>193</td>
<td>89.8</td>
<td>25</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
<tr><th>球队信息</th><th colspan="7">成立时间:1970 所属地区:俄亥俄州克里夫兰 主场馆:速贷球馆 现任主教练:泰伦-卢 总冠军次数:0次</th></tr>
</tfoot>
</table>
</body>
</html>

标签:JavaScript
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容