자바스크립트 테이블 만들기WEB JAVA SPRING/JS2023. 8. 24. 17:23
Table of Contents
테이블 만들기
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(2n+1) td:first-of-type
{
background-color:black; color:white
}
tr:nth-child(2n) td:nth-child(2n)
{
background-color:black; color:white
}
tr:nth-child(2n+1) td:nth-child(2n+1)
{
background-color:black; color:white
}
</style>
<script>
function main(a1, a2)
{
var tag = "<table border='1'>";
var b1 = parseInt(a1);
var b2 = parseInt(a2);
for (j = 1; j <= b1; j++)
{
tag += "<tr>";
for (i = 1; i <= b2; i++)
{
tag += "<td>"+"C"+j+"."+i+"</td>";
}
tag += "</tr>";
}
tag += "</table>";
area.innerHTML = tag;
}
</script>
</head>
<body>
테이블 만들기<p>
세로 줄수 : <input type="number" id="txt1"><br/>
가로 칸수 : <input type="number" id="txt2">
<button onclick="main(txt1.value, txt2.value)">enter</button>
<hr/>
<div id="area"></div>
</body>
</html>'WEB JAVA SPRING > JS' 카테고리의 다른 글
| jquery (0) | 2023.09.12 |
|---|---|
| Ajax 개념과 코드 적용(댓글 등록) (0) | 2023.09.12 |
| json데이터를 활용한 기초적인 홈페이지 (0) | 2023.08.24 |
| 자바스크립트 과목,평균,반평균 점수,순위 출력하기 (0) | 2023.08.24 |
| 자바스크립트 문자열 뒤집기 (0) | 2023.08.24 |
