Jquery implémente le style de table settings

Jquery implémente le style de table settings_jquery

WBOY

Libérer： 2016-05-16 16:17:45

original

1242 Les gens l'ont consulté

Dans l'article précédent, nous avons utilisé jquery pour implémenter une sélection complète de cases à cocher. Nous avons reçu des suggestions de certains amis. Je n'étais vraiment pas sûr de la définition du plug-in, ce qui m'a fait rire. "Sharp Jquery". Pour être honnête, je le regardais. Comme j'étudie encore, je souhaite écrire les effets jquery qui sont souvent utilisés dans les projets dans des méthodes générales. Je peux améliorer ces méthodes avec l'aide de chacun, et aussi permettre aux personnes qui ne savent pas comment le faire de découvrir une méthode, et enfin créer ma propre méthode Jquery pour faciliter une utilisation future. Ces exemples sont tous écrits par moi-même sans référence, il y a donc de nombreux domaines qui doivent être améliorés.

1 : Pourquoi écrire cette méthode

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

2 : Processus de mise en œuvre

fichier js xs_table_css.js

Copier le code Le code est le suivant :

$(document).ready(function () {

var xs_table_css = "xs_table"; //Obtenir le tableau css

var xs_table_th_css = "xs_table_th"; //le style de la table

var xs_table_even_css = "xs_table_even"; // Lignes paires du tableau css

var xs_table_odd_css = "xs_table_odd"; //Lignes impaires du tableau css

var xs_table_select_css = "xs_table_select"; //style de ligne de sélection de table

var xs_table = "table." xs_table_css;

$(xs_table).each(function () {

            $(this).children().children().has("th").addClass(xs_table_th_css); //En-tête

         var tr_even = $(this).children().children(":even").has("td"); // Lignes paires de données

         var tr_odd = $(this).children().children(":odd").has("td"); //Lignes de données impaires

        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

Copier le code Le code est le suivant :

.xs_table
{
>
.xs_table_th
{
Hauteur : 50 px ;
Couleur de fond : #C0C0C0;
>
.xs_table_even
{
Hauteur : 50 px ;
Couleur d'arrière-plan : #F0F0F0;
>

.xs_table_odd
{
Hauteur : 50 px ;
Couleur de fond : #FFFFFF;
>
.xs_table_select
{
Hauteur : 50 px ;
Couleur de fond : #D9D9D9;
>

Fichier de pages xs_table_css.htm

Copier le code Le code est le suivant :

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

    標題>

    http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    腳本>

頭>

表>