Jquery melaksanakan setting_jquery gaya jadual

Dalam artikel sebelumnya, kami menggunakan jquery untuk melaksanakan pilihan penuh kotak pilihan Kami mendapat cadangan daripada beberapa rakan saya benar-benar tidak pasti tentang definisi pemalam, yang membuatkan saya ketawa "Sharp Jquery". Sejujurnya, saya sedang menontonnya. Memandangkan saya masih belajar, saya ingin menulis kesan jquery yang sering digunakan dalam projek ke dalam kaedah umum. Saya boleh memperbaiki kaedah ini dengan bantuan semua orang, dan juga membiarkan orang yang tidak tahu cara melakukannya belajar tentang kaedah. dan akhirnya membentuk kaedah Jquery saya sendiri untuk memudahkan penggunaan masa hadapan.

1: Mengapa menulis kaedah ini

Dalam projek, beberapa jadual mesti digayakan untuk menjadikan gaya itu cantik, pengepala jadual mempunyai satu gaya, baris bernombor ganjil mempunyai satu gaya, dan baris bernombor genap mempunyai satu gaya. Warna berubah apabila tetikus melepasinya, dan kembali kepada warna apabila tetikus pergi Beginilah cara anda melakukannya.

2: Proses pelaksanaan

fail js xs_table_css.js

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi () {
var xs_table_css = "xs_table"; //Dapatkan css jadual
var xs_table_th_css = "xs_table_th"; var xs_table_even_css = "xs_table_even"; //baris bernombor genap bagi css jadual
var xs_table_odd_css = "xs_table_odd"; //baris ganjil jadual css
var xs_table_select_css = "xs_table_select"; //jadual pilih gaya baris
var xs_table = "table." xs_table_css;
$(xs_table).setiap(fungsi () {
           $(this).children().children().has("th").addClass(xs_table_th_css); //Header
         var tr_even = $(this).children().children(":even").has("td"); //Even rows of data
          var tr_odd = $(this).children().children(":odd").has("td"); //baris data bernombor ganjil
        tr_even.addClass(xs_table_even_css);
          tr_odd.addClass(xs_table_odd_css);
         tr_even.mouseover(function () {
                $(this).removeClass(xs_table_even_css);
                 $(ini).addClass(xs_table_select_css);
});
         tr_even.mouseout(function () {
                $(this).removeClass(xs_table_select_css);
                $(ini).addClass(xs_table_even_css);
});
         tr_odd.mouseover(function () {
                $(this).removeClass(xs_table_odd_css);
                 $(ini).addClass(xs_table_select_css);
});
         tr_odd.mouseout(function () {
                $(this).removeClass(xs_table_select_css);
                 $(ini).addClass(xs_table_odd_css);
});
});
});

Fail gaya xs_table.css

Salin kod Kod adalah seperti berikut:

.xs_table
{
}
.xs_table_th
{
Tinggi: 50px;
Warna latar belakang: #C0C0C0;
}
.xs_table_even
{
Tinggi: 50px;
Warna latar belakang: #F0F0F0;
}
.xs_table_odd

{
Tinggi: 50px;
Warna latar belakang: #FFFFFF;
}
.xs_table_select
{
Tinggi: 50px;
Warna latar belakang: #D9D9D9;
}

Fail halaman xs_table_css.htm

Salin kod Kod adalah seperti berikut:

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

   
   
   
   

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

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

3:方法说明

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

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

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