jQuery
jQuery In Action chapter 3-1
우혁이 아빠
2009. 12. 20. 06:06
<!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>움직이는 얼룩 무늬</title>
<script type="text/javascript" src="../js/jquery-1.2.1.js" ></script>
<script type="text/javascript">
$(function () {
$("table tr:nth-child(even)").addClass("striped");
});
function swap () {
// toggleClass : 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면
// 추가하고, 존재하면 제거한다.
$('tr').toggleClass('striped');
}
</script>
<style>
body, td{
font-size: 10pt;
}
table{
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th{
border: 1px outset silver;
background-color: maroon;
color: white;
}
tr{
background-color: white;
margin: 1px;
}
tr.striped{
background-color: coral;
}
</style>
</head>
<body>
<table onmouseover="swap()" onmouseout="swap()">
<tr>
<th>생산연도</th>
<th>제조사</th>
<th>모델</th>
</tr>
<tr>
<td>1965</td>
<td>Ford</td>
<td>Mustang</td>
</tr>
<tr>
<td>1970</td>
<td>Toyota</td>
<td>Corolla</td>
</tr>
<tr>
<td>1979</td>
<td>AMC</td>
<td>Jeep CJ-5</td>
</tr>
<tr>
<td>1983</td>
<td>Ford</td>
<td>EXP</td>
</tr>
<tr>
<td>1985</td>
<td>Dodge</td>
<td>Daytona</td>
</tr>
<tr>
<td>1990</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>1995</td>
<td>Ford</td>
<td>Ranger</td>
</tr>
<tr>
<td>1997</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2000</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2005</td>
<td>Chrysler</td>
<td>Jeep Wrangler Unlimited</td>
</tr>
<tr>
<td>2007</td>
<td>Dodge</td>
<td>Caliber R/T</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>움직이는 얼룩 무늬</title>
<script type="text/javascript" src="../js/jquery-1.2.1.js" ></script>
<script type="text/javascript">
$(function () {
$("table tr:nth-child(even)").addClass("striped");
});
function swap () {
// toggleClass : 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면
// 추가하고, 존재하면 제거한다.
$('tr').toggleClass('striped');
}
</script>
<style>
body, td{
font-size: 10pt;
}
table{
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th{
border: 1px outset silver;
background-color: maroon;
color: white;
}
tr{
background-color: white;
margin: 1px;
}
tr.striped{
background-color: coral;
}
</style>
</head>
<body>
<table onmouseover="swap()" onmouseout="swap()">
<tr>
<th>생산연도</th>
<th>제조사</th>
<th>모델</th>
</tr>
<tr>
<td>1965</td>
<td>Ford</td>
<td>Mustang</td>
</tr>
<tr>
<td>1970</td>
<td>Toyota</td>
<td>Corolla</td>
</tr>
<tr>
<td>1979</td>
<td>AMC</td>
<td>Jeep CJ-5</td>
</tr>
<tr>
<td>1983</td>
<td>Ford</td>
<td>EXP</td>
</tr>
<tr>
<td>1985</td>
<td>Dodge</td>
<td>Daytona</td>
</tr>
<tr>
<td>1990</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>1995</td>
<td>Ford</td>
<td>Ranger</td>
</tr>
<tr>
<td>1997</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2000</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2005</td>
<td>Chrysler</td>
<td>Jeep Wrangler Unlimited</td>
</tr>
<tr>
<td>2007</td>
<td>Dodge</td>
<td>Caliber R/T</td>
</tr>
</table>
</body>
</html>