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
'HTML' 카테고리의 다른 글
| 37일차//JQuery// 자주쓰는 제이쿼리 함수 (모음) (0) | 2021.03.05 |
|---|---|
| 37일차//JQuery// 테이블에 tr마우스올릴시 색상변환(this) // .css( ) (0) | 2021.03.05 |
| 37일차//JQuery//기본문법 (0) | 2021.03.05 |
| 34일차// javaScript// checkbox + 함수사용 // document.f1.elements[n].checked == true (0) | 2021.03.02 |
| 34일차// javaScript// 계산기 만들기 (0) | 2021.03.02 |
