jquery를 사용하여 체크박스가 있는 테이블을 구현하는 단계에 대한 자세한 설명

이번에는 jquery에서 checkboxes 테이블을 구현하는 단계에 대해 자세히 설명하겠습니다. jquery에서 checkboxes 테이블을 구현하기 위한 notes는 무엇입니까? 다음은 실제 사례입니다. 봐.

jquery 기술을 통해 테이블을 조작하는 것은 간단합니다. 테이블의 대체 행 색상 변경 및 플로팅 하이라이트를 쉽게 완료할 수 있습니다. 삭제할 때. , 확인란이 있는 행의 레코드를 삭제합니다. 이곳에서 행을 클릭하면 해당 행의 체크박스가 선택되며, 해당 행의 배경색도 강조 표시됩니다. 기분이 아주 좋아요.

효과는 다음과 같습니다.

여기에는 두 가지 기능이 있습니다.
기능 1. 행을 클릭하면 해당 행의 확인란이 선택되고 동시에 배경색이 변경됩니다.
기능 2. 모두 선택/모두 선택 취소 라벨을 클릭한 후 행 색상을 변경합니다.
두 함수를 js 파일로 캡슐화하여 사용할 때 가져오기만 하면 됩니다.
먼저 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");//得到被选择的复选框 
if(boxeds.length > 0) 
{ 
checkboxs.parent().parent().addClass("selected");//复选框在td里 
} 
else 
{ 
checkboxs.parent().parent().removeClass("selected"); 
} 
}

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JSON.parse()와 JSON.stringify()의 차이점과 사용 방법에 대한 자세한 설명

JS가 json을 판단하는 방법은 무엇인가요

위 내용은 jquery를 사용하여 체크박스가 있는 테이블을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!