Home > Article > Web Front-end > Detailed explanation of how to set table style using jquery

Detailed explanation of how to set table style using jquery

伊谢尔伦Original: 2017-07-22 09:07:211872browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of usage of defining class instances in JavaScript through functionsNext article：Detailed explanation of usage of defining class instances in JavaScript through functions

See more

Detailed explanation of how to set table style using jquery

Related articles