<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>filter_selector</title>
<script type="text/javascript" src="/jQuery_class/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function jqueryTest(){
//첫줄의 배경색을 회색으로 바꾸기
//$("#table tr").css("background","gray");
//$("#table tr:first").css("background","gray");
//마지막줄의 배경색을 핑크색으로 바꾸기
//$("#table tr:last-child").css("background","pink");
//첫번째 td의 글자를 흰색으로 변경
//$("#table td:first").css("color","white");
//첫번째 td들을 yellow로 바꾸기
//$("#table td:first-child").css("color","yellow");
//홀수 줄의 배경색을 cyan 인덱스가 0부터 시작하므로 even을 줘야 홀수번째가 나온다.
//$("#table tr:even").css("background","cyan");
//유관순 줄을 핑크로 바꾸기 nth-child의 인덱스는 1부터 시작
//$("#table tr:nth-child(4)").css("background","pink");
//3의 배수번째를 핑크로 바꿔라
//$("#table tr:nth-child(3n)").css("background","pink");
//3의 배수+1번째를 핑크로 바꿔라
//$("#table tr:nth-child(3n+1)").css("background","pink");
//기본의 인덱스는 0부터 홍길동 다음번째를 다 그린으로 바꿔라
//$("#table tr:gt(2)").css("background","green");
//기본의 인덱스는 0부터 홍길동 이전번째를 다 그린으로 바꿔라
//$("#table tr:lt(2)").css("background","green");
//기본의 인덱스는 0부터 2번째를 다 그린으로 바꿔라
//$("#table tr:eq(2)").css("background","green");
//td들중 서울을 가지고 있는 td를 red로 바꿔라
//$("#table td:contains('서울')").css("background","red");
//td들중 2을 가지고 있는 td를 red로 바꿔라
$("#table td:contains('2')").css("background","red");
}
</script>
</head>
<body>
<table border='1' id="table">
<tr>
<td>ID</td>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
<td>마일리지</td>
</tr>
<tr>
<td>aaaa</td>
<td>이순신</td>
<td>서울</td>
<td>02-111-2222</td>
<td>30000</td>
</tr>
<tr>
<td>bbbb</td>
<td>홍길동</td>
<td>인천</td>
<td>032-222-3333</td>
<td>40000</td>
</tr>
<tr>
<td>cccc</td>
<td>유관순</td>
<td>부산</td>
<td>051-222-3333</td>
<td>350000</td>
</tr>
<tr>
<td>dddd</td>
<td>장영실</td>
<td>광주</td>
<td>062-555-6666</td>
<td>92000</td>
</tr>
<tr>
<td>eeee</td>
<td>김유신</td>
<td>경주</td>
<td>054-777-1222</td>
<td>50000</td>
</tr>
</table>
<input type="button" onclick="jqueryTest()" value="클릭">
</body>
</html>
