Jquery implementiert den Tabellenstilsetting_jquery

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">

   
   
   
   

headone	headTwo
第二行	222222222
第三行	333333333

headone	headTwo
第二行	222222222
第三行	333333333

3：方法说明

  （1）mouseover et mouseout要先移除上次的css，不然会出现样式叠加

  （2）找tr时注意tbody,虽然页面上没有tbody标签，但是默认会有这个子元素

  （3）奇偶行要去除th，只找td的