jquery는 td 색상을 설정합니다.

페이지 개발 중에 특정 정보나 상태를 표시하기 위해 테이블의 특정 셀을 특수 색상으로 표시해야 할 수도 있습니다. jQuery를 사용하면 테이블의 배경색, 글꼴 색상 및 기타 TD 스타일을 동적으로 쉽게 설정할 수 있습니다.

1. jQuery를 사용하여 셀 색상 변경

jQuery에서는 CSS 메서드를 사용하여 색상, 높이, 너비 등 셀(TD) 스타일을 동적으로 변경할 수 있습니다. 그 중 셀의 배경색을 변경하는 코드는 다음과 같습니다.

$("td").css("background-color", "red");

이 예에서는 먼저 모든 TD 요소를 선택한 다음 css() 메서드를 사용하여 배경색 속성의 값을 변경합니다. 그림에 표시됨:

마찬가지로 CSS 구문을 사용하여 지정된 TD 요소의 스타일을 찾고 변경할 수도 있습니다. 예를 들어 두 번째 행과 세 번째 열에 있는 셀의 배경색을 변경해야 하는 경우 다음과 같이 작성할 수 있습니다.

$("table tr:eq(1) td:eq(2)").css("background-color", "blue");

이 예에서는 먼저 두 번째 행에서 <tr>元素，然后选择其中第三个<td> 요소를 선택하고 마지막으로 배경색을 변경합니다. 속성 값.

2. jQuery를 사용하여 조건에 따라 셀 색상 변경

셀 스타일을 직접 변경하는 것 외에도 조건에 따라 특정 셀의 스타일을 동적으로 변경할 수도 있습니다. 위의 예를 계속해서, 셀 안의 숫자 크기에 따라 셀의 색상을 변경하려고 합니다.

먼저 테이블의 셀을 반복한 다음 판단문을 사용하여 셀의 값을 결정해야 합니다. 셀의 숫자가 5보다 크면 배경색을 녹색으로 변경하고, 그렇지 않으면 빨간색으로 변경합니다. 코드는 다음과 같이 구현됩니다.

$("table tr").each(function(){
    $(this).find('td').each(function(){
        if(parseInt($(this).text()) > 5){
            $(this).css("background-color", "green");
        }else{
            $(this).css("background-color", "red");
        }
    });
});

이 예에서는 Each() 메서드를 사용하여 테이블의 각 행을 순회한 다음 find() 메서드를 사용하여 각 행의 셀을 순회합니다. text() 메서드를 사용하여 셀의 내용을 검색한 다음 숫자의 크기를 비교하고 배경색 속성의 값을 변경합니다.

3. 추가 셀 스타일 설정

CSS 메서드를 통해 셀 스타일의 대부분의 속성을 동적으로 변경할 수도 있습니다.

$(selector).css("propertyName", "value");

예:

1.

$("table td").css({"font-size":"18px", "color":"#333"});

2. 셀 테두리 스타일 및 색상 변경:

$("table td").css({"border-style":"solid", "border-width":"2px", "border-color":"#ccc"});

CSS 메서드 외에도 jQuery는 클래스 스타일을 추가하고 제거할 수 있는 addClass() 및 RemoveClass() 메서드와 같은 셀 스타일을 설정하는 다른 메서드도 제공합니다. 각각 . 이러한 방법을 보다 유연하게 결합하여 다양한 셀 스타일 설정 효과를 얻을 수 있습니다.

요약:

jQuery는 테이블 데이터의 특정 마크업을 크게 단순화할 수 있는 매우 편리한 셀(TD) 스타일 설정 방법을 제공합니다. 셀 스타일을 동적으로 설정함으로써 페이지 표시 효과를 신속하게 최적화하고 사용자의 대화형 경험을 향상시킬 수 있습니다.

위 내용은 jquery는 td 색상을 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!