이번에는 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()의 차이점과 사용 방법에 대한 자세한 설명
위 내용은 jquery를 사용하여 체크박스가 있는 테이블을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!