<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Insert title here</title>
</head>
<body>
<h1>수영시합</h1>
<button type="button" id="woman">여성부</button>
<button type="button" id="man">남성부</button>
<br><br>
<table border="1" id="result">
<tr> <!-- 0 -->
<th>title</th>
<th>name</th>
<th>time</th>
</tr>
<tr> <!-- 1 -->
<th>우승</th> <!-- 0 -->
<td></td>
<td></td>
</tr>
<tr>
<th>2위</th>
<td></td>
<td></td>
</tr>
<tr>
<th>3위</th>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
//file read
var woman = [
["",""],
["김영희","01:06:11"],
["이수빈","01:07:23"],
["박진희","01:12:34"],
];
var man = [
["",""],
["홍길동","01:07:55"],
["일지매","01:05:23"],
["정수동","01:15:34"],
];
$(function (){
// $("tr:even").css("background-color","#00ff00"); //1칸씩 띄워서 들어가는것.
// $("tr:eq(1) td:eq(0)").html("데이터");
// $("tr:eq(1) td:eq(1)").html("데이터1");
$("#woman").click(function(){
for(i = 0; i < 4; i++){
for(j = 0; j <2; j++){
$("tr:eq("+i+") td:eq("+j+")").html(woman[i][j]);
}
}
});
$("#man").click(function(){
for(i = 0; i < 4; i++){
for(j = 0; j <2; j++){
$("tr:eq("+i+") td:eq("+j+")").html(man[i][j]);
}
}
});
$("td").mouseover(function(){
/* $(this).css("background-color", "#ffff00"); //노랑
$(this).css("color","#000000"); */
$(this).css({"background-color":"#ffff00", "color":"#000000"}); //jason
});
$("td").mouseout(function(){
$(this).css("background-color", "#666666"); //회색
$(this).css("color","#ffffff");
});
});
</script>
</body>
</html>
★ 적용된 style.css
body{
background-color: #666666;
color: #FFFFFF;
margin :30px;
}
h1{
font: bold 2em sans-serif;
}
table{
border-collapse: collapse;
margin: 20px 0px;
}
th{
text-align:center;
background-color: #669966;
padding:5px 10px;
border: solid 1px #CCCCCC;
}
td{
text-align:left;
padding:5px 20px;
border: solid 1px #CCCCCC;
}
'프로그래밍 > jQuery' 카테고리의 다른 글
| 버튼 클릭에 따른 결과값(감추기 hide, 보여주기 show, 스위치 toggle) (0) | 2020.01.13 |
|---|---|
| 클릭했을 때 색 채움, 마우스 커서(focus,blur) (0) | 2020.01.13 |
| hide, show 세부 설정 (0) | 2020.01.10 |
| hide함수 활용_this (0) | 2020.01.10 |
| mouseover, mouseout (0) | 2020.01.10 |
