HTML
37일차//JQuery// 테이블에 데이터 넣기, eq(i)의 의미
aesup
2021. 3. 5. 12:41
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>
</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">
let woman = [
["",""],
["송혜교", "01:06:11"],
["고아라", "01:09:11"],
["김고은", "01:23:11"]
];
let man = [
["",""],
["강동원", "01:77:11"],
["현빈", "01:11:11"],
["주지훈", "01:58:11"]
];
$(document).ready(function() {
// $("tr:eq(1) td:eq(0)").html("데이터");
$("#woman").click(function name() {
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 name() {
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>
728x90