Maison > Article > interface Web > Explication détaillée de la façon de définir le style de table à l'aide de jquery

Explication détaillée de la façon de définir le style de table à l'aide de jquery

伊谢尔伦original: 2017-07-22 09:07:211869parcourir

1 : Pourquoi écrire cette méthode ?

Dans le projet, certains tableaux doivent être stylisés Afin de rendre le style beau, l'en-tête du tableau a un style et. un pour les lignes impaires, un style pour les lignes paires. La couleur change lorsque la souris passe dessus et revient à la couleur lorsque la souris part. Voici comment procéder.

2 : Processus de mise en œuvre

fichier 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);
        });
    });
});

fichier de style 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;
}

Fichier d'échange 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 : Description de la méthode

(1) Le survol et le retrait de la souris doivent d'abord supprimer le dernier CSS, sinon une superposition de style se produira

(2 ) Faites attention à tbody lorsque vous recherchez tr. Bien qu'il n'y ait pas de balise tbody sur la page, il y aura ce sous-élément

par défaut (3) Supprimez th des lignes paires et impaires et recherchez uniquement td

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la façon de définir des instances de classe en JavaScript via des fonctionsArticle suivant：Explication détaillée de la façon de définir des instances de classe en JavaScript via des fonctions

Articles Liés

Voir plus