Jquery 대체 행 색상 변경, 모바일 색상 변경, 클릭 색상 변경을 기반으로 한 테이블 Plug-in_jquery
렌더링: 
JQUERY 플러그인을 다음과 같이 작성합니다.
;(function($) {
$.fn.extend({
"alterBgColor":function(options){
//기본값 설정
option=$.extend ({
odd:"odd",
even:"even",
selected:"selected"
},options) //이 옵션에 유의하세요. 위의 함수(옵션)와 동일합니다. option은 동일한 개체입니다
//대체 줄의 색상 변경
$("tbody>tr:enev",this).addClass(option.even)
$("tbody>tr:odd",this) .addClass(option.odd)
//색상을 변경하려면 행을 클릭하세요
$('tbody>tr',this).click(function (){
var hasSelected = $(this).hasClass( option.selected)
$(this)[hasSelected?"removeClass":"addClass"](option.selected)
.find( ":checkbox").attr('checked',!hasSelected)
})
$("tbody>tr:has(:checked)",this).addClass(option.selected); 🎜>return this; //메서드를 연결 가능하게 하려면 이것을 반환하세요
})(jQuery)
2. 🎜>
코드 복사
//Custom 클래스, 지정된 값
$("#table1").alterBgColor({
odd:"odd1",
even:"even1",
selected:"mselected"
}) .find("th").css("font-size","18");
})
3. 두 가지 다른 테이블 구조:
코드 복사
| 姓name | |||
|---|---|---|---|
| 王锋 | 男 | 북경해淀区肖가족河 | |
| 王兴 | 여자 | 河북석가옥 | |
| 이명 | 男 | 北京昌平区回龙观 | |
| 程子 | 男 | 북경서성区 | |
| 赵垛稳 | 男 | 북경해淀区上地 | |
| 陈曦 | 여자 | 북경해淀区万泉庄 |
| 姓name | |||
|---|---|---|---|
| 王锋 | 男 | 북경해淀区肖가족河 | |
| 王兴 | 여자 | 河북석가옥 | |
| 이명 | 男 | 北京昌平区回龙观 | |
| 程子 | 男 | 북경서성区 | |
| 赵垛稳 | 男 | 북경해淀区上地 | |
| 陈曦 | 여자 | 북경해淀区万泉庄 |
