[JS]테이블 로우증가 / append 사용법
2019. 1. 11. 17:38
반응형
[JS]테이블 로우증가 / append 사용법
테이블의 로우를 + 해야할 경우가 있다.
html 로 직접그려준다음 하는방법도있지만 소스가 매우 지져분해지고
개발자의 입장에서 굉장히 손이 많이가는 작업이라 할수있다.
(ex) JS 단에서 html단 그릴때.)
그 수고를덜고자 append를 이용하여 테이블 로우를 증가하는 방법을 소개하고자한다.
상세내용은 주석을 보면될듯하다.
해당 내용은 앞서 소개한 count를 이용하여 5개의 로우까지만 추가가 가능하도록하였다.
http://rios.tistory.com/239?category=711004
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <script type="text/javascript" > //페이지 설정 function PageOnLoad(){ // 변수 설정 var count = 0; // 추가 버튼 클릭시 $('#ADD').bind('click', function aaaa(){ //카운트증가 btn_count++; //조건식 if(btn_count < 5 ){ //alert(btn_count); //설정해둔 템블 var template = $("#template"); //해당 테이블에 어펜드 템플값을 넣어줌 $("#Table").append($(template).val()); }else { alert("더이상 생성할수 없습니다."); } }); } </script> <body class="body"> <div id="div_main"> //추가버튼 <a href="#" id="ADD" ><button type="button" class="btn btn-default btn-sm">추가</button></a> //메인테이블 <table class="tablelist" id="Table" style='width:60%'> <colgroup> <col width="20%"/> <col width="30%"/> <col width="50%"/> </colgroup> <tr> <th scope="col" >제목1</th> <th scope="col" >제목2</th> <th scope="col" >제목3</th> </tr> //추가가 되어야 할 로우 <tr> <td><input type="text" class="text" name="name1" style="width:100%;" value="1"/></td> <td><input type="text" class="text" name="name2" style="width:100%;" value="1"/></td> <td><input type="text" class="text" name="name33" style="width:100%;" value="1"/></td> </tr> </table> // append를 해줄 공간을 우선 textarea 로 공간을 만들고 이를 가려줌 <textarea id="template" style="display:none;"> //해당 input / div / tr / table 에 id를 주어 관리함. 이를 추가해주는방식 <tr id="addRow"> <td><input type="text" class="text" name="name1" style="width:100%;" value="1"/></td> <td><input type="text" class="text" name="name2" style="width:100%;" value="1"/></td> <td><input type="text" class="text" name="name33" style="width:100%;" value="1"/></td> </tr> </textarea> </div> </body> |
반응형
'Program > JavaScript' 카테고리의 다른 글
| [Jquery/JS] TEXTAREA 자동 높이 조절_커서위치_엔터 (0) | 2019.01.13 |
|---|---|
| [JS] 같은 Name Value 가져오기 (2) | 2019.01.12 |
| [JS]버튼 클릭시 카운트 증가 (0) | 2019.01.10 |
| [JS] 테이블 엑셀 다운로드 (0) | 2018.09.12 |
| [Js] 자바스크립트 utf-8 csv excel 생성시 한글 깨짐 (0) | 2018.09.12 |
