Jquery implementiert den Tabellenstilsetting

Jquery implementiert den Tabellenstilsetting_jquery

WBOY

Freigeben： 2016-05-16 16:17:45

Original

1296 Leute haben es durchsucht

Im vorherigen Artikel haben wir jquery verwendet, um die vollständige Auswahl an Kontrollkästchen zu implementieren. Ich war mir über die Definition des Plug-Ins wirklich nicht sicher, was mich zum Lachen brachte „Sharp Jquery“. Um ehrlich zu sein, habe ich es gesehen. Da ich noch studiere, möchte ich die in Projekten häufig verwendeten JQuery-Effekte in allgemeine Methoden schreiben. Mit der Hilfe aller kann ich diese Methoden verbessern und auch Menschen, die nicht wissen, wie man das macht, etwas über eine Methode lernen lassen. und schließlich meine eigene JQuery-Bibliothek erstellen, um die zukünftige Verwendung zu erleichtern. Diese Beispiele wurden alle von mir selbst geschrieben, es gibt also viele Bereiche, die verbessert werden müssen.

1: Warum diese Methode schreiben

Im Projekt müssen einige Tabellen formatiert werden, um die Stile ansprechend zu gestalten. Der Tabellenkopf hat einen Stil, die Zeilen mit ungeraden Nummern haben einen Stil und die Zeilen mit geraden Nummern haben einen Stil. Die Farbe ändert sich, wenn die Maus darüber bewegt wird, und kehrt zur Farbe zurück, wenn die Maus sie verlässt. So machen Sie es.

2: Implementierungsprozess

JS-Datei xs_table_css.js

Code kopieren Der Code lautet wie folgt:

$(document).ready(function () {

var xs_table_css = "xs_table"; // Tabellen-CSS abrufen

var xs_table_th_css = "xs_table_th"; //th-Stil der Tabelle

var xs_table_even_css = "xs_table_even"; //Gerade nummerierte Zeilen der Tabelle css

var xs_table_odd_css = "xs_table_odd"; //Ungerade Zeilen der Tabelle css

var xs_table_select_css = "xs_table_select"; //Tabellenauswahlzeilenstil

var xs_table = "table." xs_table_css;

$(xs_table).each(function () {

            $(this).children().children().has("th").addClass(xs_table_th_css); //Header

         var tr_even = $(this).children().children(":even").has("td"); //Gerade Datenzeilen

         var tr_odd = $(this).children().children(":odd").has("td" //Ungerade nummerierte Datenzeilen

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

        });

});

});

Stildatei xs_table.css

Code kopieren Der Code lautet wie folgt:

.xs_table
{
}
.xs_table_th
{
Höhe: 50px;
Hintergrundfarbe: #C0C0C0;
}
.xs_table_even
{
Höhe: 50px;
Hintergrundfarbe: #F0F0F0;
}

.xs_table_odd
{
Höhe: 50px;
Hintergrundfarbe: #FFFFFF;
}
.xs_table_select
{
Höhe: 50px;
Hintergrundfarbe: #D9D9D9;
}

Seitendatei xs_table_css.htm

Code kopieren Der Code lautet wie folgt:

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

http://www.w3.org/1999/xhtml">

headoneheadTwo
第二行222222222
第三行333333333

headoneheadTwo
第二行222222222
第三行333333333

3：方法说明