jQuery 팁: 테이블 행 속성을 변경하는 방법
- WBOY원래의
- 2024-02-27 17:27:03905검색
제목: jQuery 팁: 표 행 속성을 변경하는 방법
텍스트:
웹 개발에서 표는 일반적으로 사용되는 요소 중 하나이며, jQuery를 통해 표 행 속성을 변경하면 페이지가 더욱 상호 작용적이고 동적인 효과를 낼 수 있습니다. . 이 기사에서는 jQuery를 사용하여 테이블 행 속성을 변경하는 몇 가지 방법을 소개하고 특정 코드 예제를 제공합니다.
1. 테이블 행에 호버 효과 추가
마우스를 테이블 행 위로 가져갈 때 테이블 행의 배경색을 변경하는 효과를 얻으려면 다음 코드를 사용할 수 있습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
tr:hover {
background-color: lightgray;
}
</style>
</head>
<body>
<table>
<tr>
<td>第一行</td>
<td>内容</td>
</tr>
<tr>
<td>第二行</td>
<td>内容</td>
</tr>
</table>
</body>
</html> 2. 테이블 행 변경 조건에 따른 색상
예 때로는 값의 크기에 따라 다른 색상을 표시하는 등 특정 조건에 따라 테이블 행의 스타일을 변경해야 하는 경우가 있습니다. 다음 코드는 데이터 크기에 따라 테이블 행의 배경색을 변경하는 방법을 보여줍니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("table tr").each(function(){
var value = parseInt($(this).find("td:last").text());
if(value > 50){
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>数据1</td>
<td>60</td>
</tr>
<tr>
<td>数据2</td>
<td>40</td>
</tr>
</table>
</body>
</html>위는 jQuery를 사용하여 테이블 행 속성을 변경하는 두 가지 일반적인 방법입니다. 이러한 기술을 통해 웹 페이지를 더 아름답게 만들 수 있습니다. 그리고 역동적이다. 이 글의 내용이 여러분에게 도움이 되기를 바랍니다!
위 내용은 jQuery 팁: 테이블 행 속성을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.