다연이네

[days05] insertRow,insertCell 구구단 표 만들기 본문

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>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days05] js try~catch  (0) 2020.12.15
[days05] 정규표현식 (을 사용해 입력값 유효성 확인 외)  (0) 2020.12.15
[days05] js Math 내장 객체와 js boolean  (0) 2020.12.15
[days05] .classList.toggle(), .nextElementSibling;  (0) 2020.12.15
[days04] .css().removeClass()/.addClass(), .eq()  (0) 2020.12.14
'Web/JavaScript' Related Articles more
Comments