제목을 선택하여 선택한 것의 줄(tr) 색변경하기(선택된 것 이외의 줄은 색 지우기) [실습]
<!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>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cafe").find("a").css("color", "green").end().css("border","1px solid blue"); //id가 cafe인 것들 중에 자식노드가 a인 것
//$("#cafe").css("border","1px solid blue").find("a").css("color", "green");
$(".desc").click(function(){
$(this).next().text("-"+$(this).text());
});
$("#tb").find("tbody").find("td:nth-child(2)").bind("click",function(){
//자신의 배경색을 제외사고 색을 white로 변경
//$(this).parent().siblings().css("background","white");
//모든 tr 배경색을 white
$("#tb tr").css("background","white");
//선택된 tr의 배경색을 cyan
$(this).parent().css("background","cyan");
alert($(this).prev().text());
});
});
</script>
<body>
<div id="cafe">
<a href="#">스타벅스</a>
<a href="#">커피빈</a>
<a href="#">커피베네</a>
<a href="#">java카페</a>
</div>
<hr/>
<div id="descLayer">
<span class="desc">설명 1</span><span></span><br>
<span class="desc">설명 2</span><span></span><br>
<span class="desc">설명 3</span><span></span><br>
<span class="desc">설명 4</span><span></span><br>
</div>
<hr>
<table border='1' id="tb" width="350px">
<thead>
<tr>
<td>no</td>
<td>제목</td>
<td>작성자</td>
<td>조회수</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1번글입니다.</td>
<td>유재석</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>2번글입니다.</td>
<td>박명수</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>3번글입니다</td>
<td>정준하</td>
<td>70</td>
</tr>
<tr>
<td>4</td>
<td>4번글입니다.</td>
<td>길</td>
<td>30</td>
</tr>
</tbody>
</table>
<hr>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div>And Again</div>
</body>
</html>
* 결과
<!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>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cafe").find("a").css("color", "green").end().css("border","1px solid blue"); //id가 cafe인 것들 중에 자식노드가 a인 것
//$("#cafe").css("border","1px solid blue").find("a").css("color", "green");
$(".desc").click(function(){
$(this).next().text("-"+$(this).text());
});
$("#tb").find("tbody").find("td:nth-child(2)").bind("click",function(){
//자신의 배경색을 제외사고 색을 white로 변경
//$(this).parent().siblings().css("background","white");
//모든 tr 배경색을 white
$("#tb tr").css("background","white");
//선택된 tr의 배경색을 cyan
$(this).parent().css("background","cyan");
alert($(this).prev().text());
});
$("#selected").nextAll("p").css("background","blue");//id가 selected 다음에 있는 것들 중에 p태그 인것만 배경색을 blue로 바꿔라
});
</script>
<body>
<div id="cafe">
<a href="#">스타벅스</a>
<a href="#">커피빈</a>
<a href="#">커피베네</a>
<a href="#">java카페</a>
</div>
<hr/>
<div id="descLayer">
<span class="desc">설명 1</span><span></span><br>
<span class="desc">설명 2</span><span></span><br>
<span class="desc">설명 3</span><span></span><br>
<span class="desc">설명 4</span><span></span><br>
</div>
<hr>
<table border='1' id="tb" width="350px">
<thead>
<tr>
<td>no</td>
<td>제목</td>
<td>작성자</td>
<td>조회수</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1번글입니다.</td>
<td>유재석</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>2번글입니다.</td>
<td>박명수</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>3번글입니다</td>
<td>정준하</td>
<td>70</td>
</tr>
<tr>
<td>4</td>
<td>4번글입니다.</td>
<td>길</td>
<td>30</td>
</tr>
</tbody>
</table>
<hr>
<p id="selected">Hello</p>
<p>Hello Again</p>
<div>And Again</div>
</body>
</html>
* 결과
