Jquery 实现table样式的设定
上一篇我们使用jquery实现checkbox的全选，得到了一些朋友的建议，其中插件的定义我的确不太清楚，也闹了个笑话，有些朋友建议我去看《锋利的Jquery》，说实话正在看了。由于正在学习中，我就想把项目中经常要用的jquery效果自己写成通用方法，可以在大家的帮助下完善这些方法，也可以让不会的了解到一种做法，最后形成自己的Jquery 方法库，方便以后的使用，这些例子都是我自己写的，没有参考，所以有很多地方需要改进。
1：为什么要写这个方法
在项目中，一些table都要设置样式，为了样式的美观，表头是一个样式，奇数行一个样式，偶数行一个样式。当鼠标经过的时候颜色变化，鼠标离开时颜色恢复,这就有了这样方法。
2：实现过程
js文件xs_table_css.js
代码如下：
$(document).ready(function () {
var xs_table_css = "xs_table"; //获取table的css
var xs_table_th_css = "xs_table_th"; //table 的th样式
var xs_table_even_css = "xs_table_even"; //table的偶数行css
var xs_table_odd_css = "xs_table_odd"; //table的奇数行css
var xs_table_select_css = "xs_table_select"; //table选择行的样式
var xs_table = "table." + xs_table_css;
$(xs_table).each(function () {
$(this).children().children().has("th").addClass(xs_table_th_css); //表头
var tr_even = $(this).children().children(":even").has("td"); //数据偶数行
var tr_odd = $(this).children().children(":odd").has("td"); //数据奇数行
tr_even.addClass(xs_table_even_css);
tr_odd.addClass(xs_table_odd_css);
tr_even.mouseover(function () {
$(this).removeClass(xs_table_even_css);
$(this).addClass(xs_table_select_css);
});
tr_even.mouseout(function () {
$(this).removeClass(xs_table_select_css);
$(this).addClass(xs_table_even_css);
});
tr_odd.mouseover(function () {
$(this).removeClass(xs_table_odd_css);
$(this).addClass(xs_table_select_css);
});
tr_odd.mouseout(function () {
$(this).removeClass(xs_table_select_css);
$(this).addClass(xs_table_odd_css);
});
});
});样式文件xs_table.css
代码如下：
.xs_table
{
}
.xs_table_th
{
height: 50px;
background-color: #C0C0C0;
}
.xs_table_even
{
height: 50px;
background-color: #F0F0F0;
}
.xs_table_odd
{
height: 50px;
background-color: #FFFFFF;
}
.xs_table_select
{
height: 50px;
background-color: #D9D9D9;
}页面文件xs_table_css.htm
代码如下：
<!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> <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的
相关推荐
momode 2020-09-11
世樹 2020-11-11
SCNUHB 2020-11-10
bleach00 2020-11-10
FellowYourHeart 2020-10-05
思君夜未眠 2020-09-04
jessieHJ 2020-08-19
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
末点 2020-08-03
nimeijian 2020-07-30
好记忆也需烂 2020-07-28
zlsdmx 2020-07-05
tomson 2020-07-05
tianqi 2020-07-05
onlykg 2020-07-04