Rumah > Artikel > hujung hadapan web > Contoh kod untuk jQuery untuk merealisasikan perubahan warna baris berselang-seli dengan mudah bagi jadual dan klik warna baris change_jquery

Contoh kod untuk jQuery untuk merealisasikan perubahan warna baris berselang-seli dengan mudah bagi jadual dan klik warna baris change_jquery

WBOYasal: 2016-05-16 09:00:261493semak imbas

JQuery dengan mudah menyedari contoh kod menukar warna setiap baris lain jadual dan menukar warna baris yang diklik

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jquery设置表格样式</title>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:green;
}
.selected{
 background-color:#FF6;
}
.se{
 background-color:#666;
}
</style>
<script language="javascript" src="../../include/jquery.js"></script>
<script>
$(document).ready(function(){
 //隔行表色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 
 //点击变色 
 $("tr").toggle(
 function(){
  
  $(this).addClass("selected");
  
 },function (){

  $(this).removeClass("selected");

 }
 );

 //滑动变色
 $("tr").mouseover(function (){
 
 $(this).addClass("se"); 
 
 }).mouseout(function (){
 
 $(this).removeClass("se");
 
 });
 

 
 
 
});
</script>
</head>

<body>
<table width="500" border="1" align="center">
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>


</body>
</html>

Kod contoh di atas untuk jQuery untuk merealisasikan dengan mudah perubahan warna baris ganti dan klik baris jadual adalah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi anda rujukan, dan saya harap anda akan menyokong Script Home .

Kenyataan：

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 sebelumnya：Contoh kesan lapisan topeng separa lutsinar pada halaman yang ditulis dalam JavaScript Klik untuk melihat kemahiran image_javascript yang lebih besarArtikel seterusnya：Contoh kesan lapisan topeng separa lutsinar pada halaman yang ditulis dalam JavaScript Klik untuk melihat kemahiran image_javascript yang lebih besar

Artikel berkaitan

Lihat lagi