jquery는 선택 및 삭제 시 강조 표시되는 확인란이 있는 테이블 행을 구현합니다.-JS 튜토리얼-php.cn

jquery는 선택 및 삭제 시 강조 표시되는 확인란이 있는 테이블 행을 구현합니다.

WBOY

풀어 주다： 2016-05-16 17:27:26

원래의

1363명이 탐색했습니다.

jquery 기술을 통해 테이블을 조작하는 것은 간단합니다. jquery의 구문을 통해 테이블의 색상을 쉽게 변경하고 강조 표시를 일시 중지할 수 있습니다. 확인란이 있는 행에 기록합니다. 이곳에서 행을 클릭하면 해당 행의 체크박스가 선택되며, 해당 행의 배경색도 강조 표시됩니다. 기분이 아주 좋아요.

효과는 다음과 같습니다.
jquery는 선택 및 삭제 시 강조 표시되는 확인란이 있는 테이블 행을 구현합니다.
여기에는 두 가지 기능이 있습니다.
기능 1. 행을 클릭하면 해당 행의 확인란이 선택되고 변경됩니다. 동시에 배경색.
기능 2. 모두 선택/모두 선택 취소 라벨을 클릭한 후 행 색상을 변경합니다.
두 함수를 js 파일로 캡슐화해서 사용할 때 import만 해두었습니다.
먼저 CSS 코드를 살펴보겠습니다. CSS 파일에 캡슐화했습니다.

코드를 복사하세요 코드는 다음과 같습니다. 다음과 같습니다:

 
.selected{ 
 background:#FF6500; 
color:#fff 
} 

코드를 보면 js 파일:
함수 1 코드:

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

 
/**
* 체크박스가 포함된 표의 배경색을 설정하세요 
*/ 
$(document).ready(function() 
{ 
/**
* 표 행을 클릭하면 배경색 변경 
*/ 
$("#tablight tr:gt(0 )").click(function() // 2번째 라인을 얻은 후
{ 
if ($(this).hasClass("selected"))//선택 여부 확인
{ 
 $(this).removeClass("selected").find(":checkbox").attr("checked",false);//스타일을 제거하려면 선택
} 
else//선택됨
 { 
$(this).addClass(" selected").find(":checkbox").attr("checked",true);//선택하지 않은 경우 스타일 추가 
} 
}); 
}); 

함수 2의 코드:

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

 
/**
* 전체 선택 및 선택 반전을 클릭한 후 배경색을 변경합니다 
*/ 
function setColor()//tr의 배경색 설정
{ 
var checkboxs = $("#tablight tr :gt(0) input[type=checkbox]");//모든 체크박스 가져오기
var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//Get 선택된 체크박스
if(boxeds.length > 0) 
{ 
checkboxs.parent().parent().addClass("selected");//체크박스는 td 
}에 있습니다. 
else 
{ 
checkboxs.parent().parent().removeClass("selected") 
} 
} 