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")
}
}

코드를 원하는 경우 적용하려면 테이블에 id 속성을 추가해야 합니다. 속성 값은 "tablight"입니다. 동시에 모두 선택/선택 취소한 후 setColor 메서드를 호출하면 됩니다.