Jquery가 테이블을 작동하는 방법에 대한 다양한 예 요약

이 문서에는 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();

10. 모두 선택하거나 없음을 선택하세요

//删除除第一列外的所有列
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();

11. 클라이언트가 동적으로 행을 추가하고 삭제합니다

//设置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 중국어 웹사이트의 기타 관련 기사를 참조하세요!