[jQuery] 테이블 동적 생성

JQuery

[jQuery] 테이블 동적 생성

NamGH 2023. 9. 21. 16:49

예제 : 내가 원하는 행과열로 테이블 동적생성 하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	img{
		width: 100px; 	
		height: 100px; 	
	}
</style>
<script src = "../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		var arr =new Array("a.jpg","b.jpg","c.jpg","d.jpg","e.jpg");
		$('#tableCreate').click(function(){
			$('#tableArea').empty(); 
			var row = $('#row').val();
			var col = $('#col').val();
			
			if(isNaN(row) || isNaN(col)){
				alert('숫자를 입력하세요');
				return false
			}
			$('#tableArea').append("<table border = 1 id = table></table>"); 
			
			for(i = 0; i < row; i++){
				$('#table').append("<tr id =" + i +"></tr>");
				for(j = 0; j < col; j++){
					var rand = parseInt(Math.random()*5);
					$('#'+i).append("<td><img src = ../images/" +arr[rand] +"></td>");
				}
			}
		})
	});
</script>
</head>
<body>
	<input type="text" id = "row" value = "2" size = "5">행
	<input type="text" id = "col" value = "3" size = "5">열
	
	<input type="button" id = "tableCreate" value="테이블 동적 생성">
	
	<div id = "tableArea"></div>
</body>
</html>
<!-- 버튼 클릭시 테이블 생성 -->

결과