jQuery는 테이블의 행과 열을 선택하고 간단한 styles_jquery를 변경합니다.

jQuery는 특정 행이나 열 정렬, 스타일 변경 등과 같은 테이블 처리를 위한 매우 강력한 기능을 제공합니다. 귀하의 영어 실력이 충분하다면 다음 기사를 읽어보세요: jQuery 테이블 조작. 이 기사에서는 jQuery 문을 사용하여 테이블의 행과 열을 선택하고 몇 가지 간단한 스타일을 변경하는 방법만 소개합니다. jQuery 테이블 처리를 심층적으로 학습하는 데 도움이 되기를 바랍니다.

예를 들어 다음과 같은 테이블이 있습니다. :

第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列

행을 조작하는 것은 비교적 간단합니다:
1. 첫 번째 행을 선택하려면 $("tr:eq(0)")를 사용하면 됩니다.
2. N번째 행을 선택하려면 $("tr:eq(n-1)")을 사용하면 됩니다.
3 홀수 행을 선택하려면 $("를 사용하면 됩니다. tr:odd")
4. 짝수 행을 선택하려면 $("tr:even")을 사용하면 됩니다.
열 연산은 조금 더 번거롭지만 이렇게 하면 어렵지 않습니다. 원리를 알아라. 테이블에는 열 요소가 없습니다. 첫 번째 열은 실제로 각 행의 첫 번째 영역(td)을 조합한 것입니다. 따라서 루프를 사용하여 행을 선택할 수 있습니다.
1. 첫 번째 열을 선택하고 스타일을 변경하려면 다음 명령문을 사용하면 됩니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function(){
$("table").find("td").each(function( i){ //테이블에서 각 간격을 검색합니다
if(i%4 == 0){ //'4'는 테이블에 총 4개의 열이 있음을 의미합니다. 간격 숫자가 4로 나누어지면, 그러면 첫 번째 열에 속합니다
$(this).addClass("col_1");}//간격에 특정 스타일을 추가합니다
})
});
2. 다른 열을 선택하려면 위 코드에서 i%4==0을 변경하고 그에 맞게 변경하면 됩니다. 기억하세요: 4는 테이블의 열 수를 나타냅니다. 열이 10개인 경우 첫 번째 열을 선택하고 나머지는 0과 같아야 하며 두 번째 열을 선택하고 나머지는 1과 같아야 합니다. 곧.

업데이트(2009/10/20): 추가해 주신 JOE에게 감사드립니다! 내 방법은 테이블의 열 수를 인위적으로 변경해야 하는 반면, JOE의 방법은 코드가 간단할 뿐만 아니라 열 수에 제한도 없습니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ){

$("#button1").click(function(){
$("#demo1 tr").each(function() {
$(this).find("td: first") .css({color:"red",fontWeight:"bold"});
});
});
});


할 수 있습니다. 또한 선택 변환기를 변경하여 짝수 또는 홀수 열을 변경합니다. 참고: 첫 번째 열은 0부터 시작하므로 td:odd는 짝수 열을 나타냅니다.

코드 복사 코드는 다음과 같습니다.

//참고: 첫 번째 열은 0부터 시작하므로 td:odd는 짝수 열을 나타냅니다. ;button id= "10200902">위 표의 짝수 열을 변경하려면 클릭하세요