728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220422/jquery4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>table 태그 다루기</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//tr태그의 짝수인덱스인 경우 배경 파랑색, 글자색 흰색으로 설정
// $("tr:even").css("background","blue").css("color","white")
//tr태그의 홀수인덱스인 경우 배경 초록색, 글자색 노랑색으로 설정
// $("tr:odd").css("background","green").css("color","yellow")
//tr태그의 첫번째 태그인 경우 배경 검정색, 글자색 흰색으로 설정
// $("tr:first").css("background","black").css("color","white")
//tr태그의 마지막 태그인 경우 배경 분홍색, 글자색 노란색으로 설정
// $("tr:last").css("background","pink").css("color","yellow")
})
</script>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>혈액형</th>
<th>지역</th>
</tr>
<tr>
<td>홍길동</td>
<td>O형</td>
<td>서울</td>
</tr>
<tr>
<td>이몽룡</td>
<td>A형</td>
<td>남원</td>
</tr>
<tr>
<td>임꺽정</td>
<td>B형</td>
<td>전주</td>
</tr>
<tr>
<td>김삿갓</td>
<td>AB형</td>
<td>하남</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<th>이름</th>
<th>혈액형</th>
<th>지역</th>
</tr>
<tr>
<td>홍길동</td>
<td>O형</td>
<td>서울</td>
</tr>
<tr>
<td>이몽룡</td>
<td>A형</td>
<td>남원</td>
</tr>
<tr>
<td>임꺽정</td>
<td>B형</td>
<td>전주</td>
</tr>
<tr>
<td>김삿갓</td>
<td>AB형</td>
<td>하남</td>
</tr>
<tr>
<td>홍길동</td>
<td>O형</td>
<td>서울</td>
</tr>
<tr>
<td>이몽룡</td>
<td>A형</td>
<td>남원</td>
</tr>
<tr>
<td>임꺽정</td>
<td>B형</td>
<td>전주</td>
</tr>
<tr>
<td>김삿갓</td>
<td>AB형</td>
<td>하남</td>
</tr>
</table>
<script type="text/javascript">
//첫번째 tr : 초록색배경, 두번째 tr : 노랑색배경, 세번째 tr : 파랑배경. 반복...
//nth-child(3n+1) : 3으로 나눈 나머지가 1인 순서
$("tr:nth-child(3n+1)").css("background","green")
$("tr:nth-child(3n+2)").css("background","yellow")
$("tr:nth-child(3n)").css("background","blue")
//첫번째 tr 태그를 배경 검정색, 글자색 노란색으로 설정
// $("tr:first").css("background","black").css("color","yellow")
// $("tr:first").css({"background":"black", "color":"yellow"})
$("tr:eq(0)").css({"background":"black", "color":"yellow"})
//다섯번째 tr 태그를 배경 검정색, 글자색 노란색으로 설정
$("tr:eq(5)").css({"background":"black", "color":"yellow"})
</script>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery each 함수(let arr=, $.each) (0) | 2022.04.22 |
|---|---|
| [Jquery] 21. Jquery 반복문 (nth-child, odd, even, $.each(), let colors = []) (0) | 2022.04.22 |
| [Jquery] 21. Jquery 선택자 사용 (0) | 2022.04.22 |
| [Jquery] 21. Jquery alert창 띄우기(setTimeout) (0) | 2022.04.22 |
| [Jquery] 21. Jquery (태그, 속성 글자색 변경) (0) | 2022.04.22 |