使用jquery如何设定table样式用法详解

来源：动视网责编：小采时间：2020-11-27 20:15:35

使用jquery如何设定table样式用法详解

使用jquery如何设定table样式用法详解:1：为什么要写这个方法在项目中，一些table都要设置样式，为了样式的美观，表头是一个样式，奇数行一个样式，偶数行一个样式。当鼠标经过的时候颜色变化，鼠标离开时颜色恢复,这就有了这样方法。2：实现过程js文件xs_table_css.js$(document).re

推荐度：

点击下载本文 文档为doc格式

导读使用jquery如何设定table样式用法详解:1：为什么要写这个方法在项目中，一些table都要设置样式，为了样式的美观，表头是一个样式，奇数行一个样式，偶数行一个样式。当鼠标经过的时候颜色变化，鼠标离开时颜色恢复,这就有了这样方法。2：实现过程js文件xs_table_css.js$(document).re

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的