<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
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;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>수영시합</h1>
<button id="woman">여성부</button>
<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>
<td></td>
<!-- 0 -->
<td></td>
</tr>
<tr>
<th>2위</th>
<td></td>
<td></td>
</tr>
<tr>
<th>3위</th>
<td></td>
<td></td>
</tr>
</table>
<script>
var woman = [
["", ""],
["김영희", "01:06:11"],
["이수빈", "01:07:23"],
["박진희", "01:12:34"],
];
var man = [
["", ""],
["홍길동", "01:03:11"],
["일지매", "01:04:23"],
["정수동", "01:10:34"],
];
$(function() {
//한단계 넘어가는 옵션
//$("tr:even").css("background-color", "green");
//$("tr:eq(1) td:eq(0)").html("데이터");
//$("tr:eq(1) td:eq(1)").html("데이터 1");
$("#woman").click(function() {
for (i = 0; i < woman.length; i++) {
for (j = 0; j < woman[i].length; j++) {
$("tr:eq(" + i + ") td:eq(" + j + ")").html(woman[i][j]);
}
}
});
$("#man").click(function() {
for (i = 0; i < man.length; i++) {
for (j = 0; j < man[i].length; j++) {
$("tr:eq(" + i + ") td:eq(" + j + ")").html(man[i][j]);
}
}
});
$("td").mouseover(function() {
//$(this).css("background-color", "#ffff00");
//$(this).css("color", "black");
$(this).css({
"background-color": "#ffff00",
"color": "#000000"
})
});
$("td").mouseout(function() {
// $(this).css("background-color", "#666666");
//$(this).css("color", "#ffffff");
$(this).css({
"background-color": "#666666",
"color": "#ffffff"
})
})
});
</script>
</body>
</html>
