이 문서에는 jQuery를 사용하여 Table을 운영하는 기술이 요약되어 있습니다. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
1. 마우스가 움직일 때 행의 색상이 변경됩니다.
방법 1: jQuery의 hover(fun(), fun()) 메서드, 매개 변수 1 : 첫 번째 방법은 스타일 기능 추가, 매개변수 2: 두 번째 방법은 스타일 기능 취소
$("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $(this).children("td").removeClass("hover") })
방법 2:
$("#table1 tr:gt(0)").hover(function() { $(this).children("td").addClass("hover"); }, function() { $(this).children("td").removeClass("hover"); });
2 홀수 행과 짝수 행의 색상이 다릅니다
$("#table1 tbody tr:odd").css("background-color", "#bbf"); $("#table1 tbody tr:even").css("background-color","#ffc"); $("#table1 tbody tr:odd").addClass("odd") $("#table1 tbody tr:even").addClass("even")
3. 행 하나 숨기기
$("#table1 tbody tr:eq(3)").hide();
4. 열 숨기기
방법 1:
$("#table1 tr td::nth-child(3)").hide();
방법 2:
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
5. 으으으으
6. 열을 삭제하십시오 각 행에 지정된 셀//删除除第一行外的所有行
$("#table1 tr:not(:first)").remove();
//删除指定行
$("#table1 tr:eq(3)").remove();
//删除除第一列外的所有列
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();
//设置table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html("value");
//获取table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html();
rr 리
위 내용은 Jquery가 테이블을 작동하는 방법에 대한 다양한 예 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!