집 > 기사 > 웹 프론트엔드 > 테이블의 행 색상 변경을 쉽게 구현하고 행 색상을 클릭하는 jQuery의 예제 코드change_jquery

테이블의 행 색상 변경을 쉽게 구현하고 행 색상을 클릭하는 jQuery의 예제 코드change_jquery

WBOY원래의: 2016-05-16 09:00:261495검색

JQuery는 테이블의 행 하나 걸러 색상을 변경하고 클릭한 행의 색상을 변경하는 예제 코드를 쉽게 구현합니다

<!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>

위의 jQuery 예제 코드는 테이블의 대체 행의 색상 변경과 클릭 행을 쉽게 구현하기 위해 편집기에서 공유한 모든 내용을 참고할 수 있기를 바라며, Script Home을 지원해 주시길 바랍니다. .

성명：

이전 기사：JavaScript로 작성된 페이지의 반투명 마스크 레이어 효과 예 및 더 큰 image_javascript 기술을 보려면 클릭하세요.다음 기사：JavaScript로 작성된 페이지의 반투명 마스크 레이어 효과 예 및 더 큰 image_javascript 기술을 보려면 클릭하세요.

테이블의 행 색상 변경을 쉽게 구현하고 행 색상을 클릭하는 jQuery의 예제 코드change_jquery

관련 기사