송민준의 개발노트

선택한 숫자만큼 테이블에 보여주기(후에 게시판 목록갯수 활용가능) 본문

웹/jQuery`

선택한 숫자만큼 테이블에 보여주기(후에 게시판 목록갯수 활용가능)

송민준 2019. 10. 25. 16:53 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
      table td, th{
      	border-bottom:2px solid #e7e7e7;
      	width : 100px;
      	height : 30px;
      	text-align : center;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
   
    <script>
     $(document).ready(function () {
    	
      function show(){
    	var ind = $('option:selected').val();
       	var array = [
                     {id:"hong",  subject:"잘~지내지?", date:"2019-04-23" },
                     {id:"kim",  subject:"점심 뭐 먹지?", date:"2019-04-24" },
                     {id:"lee",  subject:"짜장먹자", date:"2019-04-24" },
                   ];
		var output = '<table><thead><tr><th>번호</th><th>아이디</th><th>제목</th><th>날짜</th></tr></thead><tbody>';
		
		$.each(array, function(index, item) {
			if(ind > index) {
				output += '<tr><td>';
				output += index+1;
				output += '</td><td>';
				output += item.id;
				output += '</td><td>';
				output += item.subject;
				output += '</td><td>';
				output += item.date;
				output += '</td></tr>';
			}
		});
		output += '</tbody></table>';
		$('table').html(output);
        /*document.getElementsByTagName("table")[0].innerHTML = output;*/

      }
        	
        	show();
            setInterval(show, 100);
     });
    </script>
</head>
<body>
   <div>
       <span>보여줄 항목 수</span> 
       <select id="count"> 
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3" selected>3</option>
       </select>
   </div>
   <table></table>
</body>
</html>

table을 미리 선언해놓고 안에 들어가는 코드들은 스크립트에서 선언되게 했다.

 

select에서 선택된 숫자를 받아와서 그 숫자보다 작은 배열의 인덱스를 출력함.

 

ex) select에서 2가 선언되었으면 2보다 작은 0, 1번의 배열값이 테이블에 뿌려짐.

 

javascript에서 innerHTML 대신 쓰인게 .html() 이다. html을 append로 바꿔주면 계속해서 테이블이 추가됨

 

* td 구분없이 밑에 선 주고 싶으면 css에 다음 코드 추가

 table {
      border-collapse : collapse;
  }

'웹 > jQuery`' 카테고리의 다른 글

jQeury 활용4  (0) 2019.10.29
jQuery활용 3  (0) 2019.10.28
jQuery 활용2  (0) 2019.10.25
JQuery 활용1  (0) 2019.10.25
jQuery  (0) 2019.10.24
'웹/jQuery`' Related Articles more