๐ ์๋ฐ ์๋ฒ ํ์ด์ง JSP/๐ช ์ ์ด ์ฟผ๋ฆฌ jQuery
4๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - ๋ฒํผ + 2์ฐจ์ ๋ฐฐ์ด ์ด์ฉํ ํ ์ด๋ธ ์๋ ์์ฑ
Meteora_
2021. 3. 5. 18:26
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>์์์ํฉ</h1>
<button type="button" id="woman">์ฌ์ฑ๋ถ</button>
<button type="button" id="man">๋จ์ฑ๋ถ</button>
<br><br>
<table border="1">
<tr>
<th>title</th>
<th>name</th>
<th>time</th>
</tr>
<tr>
<th>์ฐ์น</th>
<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">
//2์ฐจ์๋ฐฐ์ด
let woman = [["",""],["๊น์ํฌ","01:06:11"],["์ฑ์ถํฅ","01:17:34"],["๋ฐ์งํฌ","01:23:45"]];
let man = [["",""],["ํ๊ธธ๋","01:16:23"],["์ผ์ง๋งค","01:24:51"],["์ ์๋","01:34:19"]];
$(document).ready(function(){
//$("tr:eq(1) td:eq(2)").html("๋ฐ์ดํฐ");
$("#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]);
}
}
});
});
</script>
</body>
</html>