Jquery 대체 행 색상 변경, 모바일 색상 변경, 클릭 색상 변경을 기반으로 한 테이블 Plug-in

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

코드는 다음과 같습니다. $(function(){ / /기본 클래스에 따르면

<일>

<일>姓别
暂住地


王锋	男	북경해淀区肖가족河
王兴	여자	河북석가옥
이명	男	北京昌平区回龙观
程子	男	북경서성区
赵垛稳	男	북경해淀区上地
陈曦	여자	북경해淀区万泉庄

<일>

<일>姓别
暂住地

四、样式如下：

复主代码代码如下:

 
 🎜>이것으로 모두 댓글 남겨주시면 감사하겠습니다! 
이해가 안 되시면 연락주세요(왕펑 QQ: 155259396). 

코드 복사 코드는 다음과 같습니다. (function($){

$.fn.extend({

" SetTableBgColor":function(options) { 
//기본 스타일 값 설정
option=$.extend({ 
odd:"odd",//홀수 행
even:"even", //짝수 행
선택됨 :"selected",//선택된 행
over:"over"//마우스가 위로 움직일 때
}, options);//여기에 있는 옵션은 다음과 동일한 개체입니다. 함수의 매개변수
// 대체 행의 색상 변경 
$("tbody>tr:even",this).addClass(option.even) 
$("tbody>tr:odd" ,this).addClass(option.odd);//색상을 변경하려면 행을 클릭하세요. 
$("tbody>tr",this).click(function(){ 
$("tbody> tr").removeClass(option.selected); 
 //var hasSelected=$(this).hasClass(option.selected);//클릭 상태의 스타일이 포함되었는지 쿼리하려면 true 또는 false를 반환합니다.
$(this).addClass(option.selected);//Give 선택한 행에 스타일 추가 [hasSelected?"removeClass":"addClass"] 포함 여부에 따라 스타일 제거 및 추가 
}); 🎜>//마우스가 위로 움직일 때 색상 변경
$("tbody>tr",this ).mouseover(function(){ 
$(this).addClass(option.over); 
} ); 
//마우스를 밖으로 이동하면 원래 스타일로 다시 변경
$("tbody> tr",this).mouseout(function(){ 
$(this).removeClass(option .over); 
}); 
return this;//메서드를 연결 가능하게 하려면 여기를 참고하세요. 그렇지 않으면 메서드를 직접 호출할 수 없습니다. 
} 
 })(jQuery);//이 장소(jquery)를 추가해야 합니다. 그렇지 않으면 오류가 보고됩니다.
//메서드 호출
// $(".TableList").SetTableBgColor({ 
 // 홀수:"", 
// 짝수: "alt", 
// selected: "selected", 
/ / over: "over" 
// }); 


/201012/yuanma/SetTableBgColor.rar

성명：

이전 기사：JavaScript_javascript 기술의 var 선언의 변수 범위 추론에 대해다음 기사：JavaScript_javascript 기술의 var 선언의 변수 범위 추론에 대해

Jquery 대체 행 색상 변경, 모바일 색상 변경, 클릭 색상 변경을 기반으로 한 테이블 Plug-in_jquery

관련 기사