Jquery implémente le style de table settings_jquery

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">
    腳本>
   
頭>









表>

headone	headTwo
第一行	111111111
第二行	222222222
第三行	333333333
第四行	444444444

表>
身體>

3：方法說明

  （1）mouseover和mouseout要先移除最後一個的css，否則會出現樣式加重

  （2）尋找tr時注意tbody，雖然頁面上沒有body標籤，但是預設會有這個子元素

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

headone	headTwo
第一行	111111111
第二行	222222222
第三行	333333333
第四行	444444444