Jquery 实现table样式的设定
内容摘要
上一篇我们使用jquery实现checkbox的全选，得到了一些朋友的建议，其中插件的定义我的确不太清楚，也闹了个笑话，有些朋友建议我去看《锋利的Jquery》，说实话正在看了。由于正在学习
文章正文
上一篇我们使用jquery实现checkbox的全选，得到了一些朋友的建议，其中插件的定义我的确不太清楚，也闹了个笑话，有些朋友建议我去看《锋利的Jquery》，说实话正在看了。由于正在学习中，我就想把项目中经常要用的jquery效果自己写成通用方法，可以在大家的帮助下完善这些方法，也可以让不会的了解到一种做法，最后形成自己的Jquery 方法库，方便以后的使用，这些例子都是我自己写的，没有参考，所以有很多地方需要改进。
1：为什么要写这个方法
在项目中，一些table都要设置样式，为了样式的美观，表头是一个样式，奇数行一个样式，偶数行一个样式。当鼠标经过的时候颜色变化，鼠标离开时颜色恢复,这就有了这样方法。
2：实现过程
js文件xs_table_css.js
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="xs_table.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
</script>
<script src="xs_table_css.js" type="text/javascript"></script>
</head>
<body>
<table class="xs_table" width="800px">
<tbody >
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</tbody>
</table>
<br />
<br />
<table class="xs_table" width="800px">
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="xs_table.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
</script>
<script src="xs_table_css.js" type="text/javascript"></script>
</head>
<body>
<table class="xs_table" width="800px">
<tbody >
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</tbody>
</table>
<br />
<br />
<table class="xs_table" width="800px">
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</table>
</body>
</html>
3：方法说明
（1）mouseover和mouseout要先移除上次的css，不然会出现样式叠加
（2）找tr时注意tbody,虽然页面上没有tbody标签，但是默认会有这个子元素
（3）奇偶行要去除th，只找td的
代码注释
作者：喵哥笔记
