masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > table行随鼠标移动变色示例_jquery

table行随鼠标移动变色示例_jquery

WBOY
Lepaskan： 2016-05-16 16:49:31
asal
1227 orang telah melayarinya

1、设计表格

复制代码 代码如下:






































































工号 姓名 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女




2、设计样式
复制代码 代码如下:

.html_body .body_div{
width: 1340;
height: 595;
}
.body_div{
font-size: 12px;
background-color: #CCCCCC;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 100%;
}

3、设计JS
复制代码 代码如下:

//设置奇数行背景色
$("#tab tr:odd").find("td").addClass("tr_odd");
//设置偶数行背景色
$("#tab tr:even").find("td").addClass("tr_even");

/**
* 鼠标移到的颜色
*/
$("#tab tr").mouseover(function(){
$(this).find("td").addClass("mouse_color");
});

/**
* 鼠标移出的颜色
*/
$("#tab tr").mouseout(function(){
$(this).find("td").removeClass("mouse_color");
});

4、设计结果

（1）初始化
table行随鼠标移动变色示例_jquery 
（2）单击奇数行
table行随鼠标移动变色示例_jquery 
（3）单击偶数行
table行随鼠标移动变色示例_jquery 
5、附录
复制代码 代码如下:







table随鼠标变色

















































































工号 姓名 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女




Label berkaitan：
变色
sumber：php.cn
Artikel sebelumnya：在JavaScript中使用timer示例_javascript技巧 Artikel seterusnya：Android中的jQuery:AQuery简介_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1361
Tatasusunan PHP yang diperoleh daripada parameter URL tidak berkelakuan seperti yang diharapkan Saya mempunyai parameter URL yang mengandungi id kategori dan saya mahu menganggapnya seba...
daripada 2024-04-06 22:09:02
0
1
1428
Gerakkan kandungan ke kiri dengan menambahkan sifat Width Saya telah memberikan margin kepada badan. utama {margin kiri: 200px; jidar kanan: 200px p...
daripada 2024-04-06 22:01:35
0
3
816
Di mana saya harus meletakkan arahan CustomLog dalam apache Saya menggunakan php:7.2-apachedocker. Saya perlu melumpuhkan log akses log masuk url sema...
daripada 2024-04-06 22:03:59
0
1
990
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan