<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dtable.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<div class="container6">
<a href="main1.html">메인으로</a>
<h3>데이터테이블 실습</h3>
<table border="1" id="table">
<thead>
<tr>
<th>번호</th>
<th>지역</th>
<th>인구수</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- 아래 script src 순서중요 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
const tbody = document.getElementsByTagName("tbody");
for(let i=0; i<30; i++){
tbody[0].innerHTML +=
`<tr>`+
`<td>${i}</td>` +
`<td>부산${i}</td>` +
`<td>1000</td>` +
`</tr>`;
}
// const table = document.getElementById("table"); 과 같음 42~44
$(function(){ // Jquery문법을 사용하겠다는 말
for(let i=0; i<3; i++){
$('tbody').append( // $('@@@') -> ID가 @@@인 것을 찾아라!
`<tr>`+
`<td>${i}</td>` +
`<td>부산${i}</td>` +
`<td>1000</td>` +
`</tr>`
);
}
$('#table').DataTable();
});
</script>
</body>
</html>
20211208-