使用jquery 如何設定table樣式用法詳解
- 伊谢尔伦原創
- 2017-07-22 09:07:211873瀏覽
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的以上是使用jquery 如何設定table樣式用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn