Jquery(6) 2차원배열, td:eq(index) ,for문
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>수영 시합</h1>
<button id="woman">여자부</button>
<button id="man">남자부</button>
<table border="1" id="result">
<tr>
<th></th>
<th>이름</th>
<th>타임</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">
var man = [//2차원 배열 생성
[" "," "],
["홍길동","1:21:13"],
["일지매","1:25:31"],
["임꺽정","1:34:54"],
];
var woman = [
[" "," "],
["손나은","2:21:13"],
["아이유","2:25:31"],
["설리","2:34:54"],
];
//$('tr:even').css('background-color','#00ff00'); //초록색 짝수 index가
$('tr:eq(3)>td:eq(0)').html('test'); //td태그의 0번 째 index 부터 3번 쨰 인덱스 사이에 있는 태그들에
/* $('#id').text(); //일반 태그 접근 밑에꺼랑 기능은 같지만 태그도 같이 출력이 되버린다. text 니까
$('#id').html(); //일반 태그 접근 ()안쪽에 태그랑 같이 text 넣을 수 있는데 여기서는 태그는 안나옴
$('#id').val(); //text필드 접근 */
//for문
$("#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>
============================================
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;
}