1: Why write this method
In the project, some tables must be styled. In order to make the style beautiful, the table header has one style and one for odd-numbered rows. Style, one style for even-numbered rows. The color changes when the mouse passes over it, and returns to color when the mouse leaves. This is how you do it.
2: Implementation process
js file 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); }); }); });
Style file 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; }
Page file 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: Method description
(1) Mouseover and mouseout must first remove the last css, otherwise style overlay will occur
(2) When looking for tr Pay attention to tbody. Although there is no tbody tag on the page, there will be this sub-element
by default. (3) Remove th from odd and even lines, and only look for the
of td.The above is the detailed content of Detailed explanation of how to set table style using jquery. For more information, please follow other related articles on the PHP Chinese website!