Web/JavaScript
[days05] insertRow,insertCell 구구단 표 만들기
다연
2020. 12. 15. 14:03
반응형
insertRow(행 추가)
insertCell(셀추가)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script>
var tbl = document.createElement("table");
tbl.setAttribute("border", 1);
tbl.setAttribute("style", "width:100%");
//tr생성
var tr = tbl.insertRow( tble.rows.length ); //tbl.rows: 컬렉션
//insertRow(행 추가)
for (var i = 2; i <=9; i++) {
//td생성
var th = tr.insertCell(i-2); //0번째 셀 1번째 셀...
//insertCell(셀추가)
th.innerHTML=i+"단";
}
for (var i = 1; i <=9; i++) {
var tr = tbl.insertRow(tbl.rows.length); //행추가
for (var d = 2; d <=9; d++) {
var td = tr.insertCell(d-2);
td.innerHTML=d+"*"+i+"="+i*d;
}
}
document.getElementById("demo").appendChild(tbl);
</script>
</body>
</html>반응형