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 .
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
