반응형


​

◎ tabl2excel 라이브러리 사용

​

▼ 내용

table to excel converter

java 단이나 jsp 단으로 poi나 jxl 라이브러리를 사용할수있지만.... 

js 로 바꾸고싶어 찾아보다 사용하기 편한 라이브러리를 발견하여 관련된 사용법을 작성합니다.

​


아래 소스를 다운받아 엑셀로 실행하엿을경우 위 그림처럼 export가 된다.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/jquery.table2excel.js"></script> </head> <body> <table id="TableToExcel" border=2 width=710 cellpadding=0 cellspacing=0 class='table table-bordered' align=center style='border-collapse:collapse;' > <thead> <tr> <td>번호</td> <td>번호</td> <td>번호</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> </tbody> </table> <iframe id="txtArea1" style="display:none"></iframe> <!-- IE 호환을 위해서 iframe을 추가해야한다 --> <!-- IE에서는 txtArea1 의 객체를 찾기 때문이다. 크롬은 없어도 된다. 있어도 상관은 없다. --> <input type='button' class='btn btn-inverse' value='excel 다운' style='width:100px;height:36px;font-weight:bold;' onclick="ReportToExcelConverter()" /> </body> <script> function ReportToExcelConverter() { $("#TableToExcel").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "report" +'.xls', //확장자를 여기서 붙여줘야한다. fileext: ".xls", exclude_img: true, exclude_links: true, exclude_inputs: true }); }; </script> </html>

위 소스처럼 table의 id를 지정하고 제이쿼리함수 $("#아이디") 를 지정한다음 위 소스처럼 작성하면 table 을 자동으로 excel 형식으로 export 해준다. script 를 불러올때 꼭 jquery 를 부른다음 table2excel.js 를 로드해야한다. 또한 iframe을 써줘야 ie에서 작동이된다.

excel exprort.zip


예제 파일이다.

◎ tabl2excel 공식파일과 사이트

​

▼ 내용

https://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html








Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.zip

​

https://github.com/rainabba/jquery-table2excel



jquery-table2excel-master.zip



위에 링크가 공식문서고 나는 아래에서 다운받아서 작업하엿기 때문에 둘다 링크를 남긴다

​

​


반응형
저작자표시 비영리 변경금지

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27
반응형

article :

1. (신문·잡지의) 글, 기사

2. (합의서·계약서의) 조항

3. (특히 세트로 된 물건의 개별) 물품

​

section:

1. (여러 개로 나뉜 것의 한) 부분, 부문, 구획

2. (조립식) 부품

3. (문서책 등에서) 절(節), (신문의) 난(欄)

​

nav (navigation):

1. (지도 등을 보며) 길을 찾다

2. (바다·강 등을) 항해하다

3. (힘들거나 복잡한 상황을) 다루다

​

각각의 이런뜻이 있습니다.

옜날에는 모든것을 div로 묶어서 표현하였지만 HTML5 로 오면서 묶는거에도

의미를 두자 해서 여러가지 태그들이 나왓습니다

그중 많이쓰이는것이 HEADER , FOOTER , MAIN , NAV ,SECTION ,ARCTILE 등등

여러가지가 있찌만 (HTML5에서 나온태그들입니다.) 각각의 태그들은 이름 그대로의 의미를 가지고

딲히 다른 태그들처럼 특별한 기능은 없이 HTML문서를 레이아웃으로 구역화시키고 나누고 레이아웃을 짜고 묶는데를 주력으로 만들었다고 생각합니다.

자그럼 이태그들을 어떨때 사용해야하는지를이제 알아보겠습니다. 간단하게!

​

arctile 은 내용이 각기 독립적이고, 홀로 설 수 있는 내용 (블로그 글 , 뉴스기사)

section 은 내용이 서로 관계있을 경우 (주로 문서를 다른주제로 구분 짓기)

div 는 오로지 내용을 묶는 역할.

​

여러개의 section을 article 로 묶을수 있고,

마찬가지로 여러개의 article 을 section 으로 묶을수 있습니다.

​

nav 는 메뉴바 등의 다른 링크들을 모으는 구역? 레이아웃을 설정할떄 젤 상위로 사용합니다.

반응형

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그  (0) 2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder})  (0) 2019.02.28
HTML 태그  (0) 2019.02.27
반응형


라이브러리 (jquery.com)

자주사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 라고 한다.

​

CDN(Content Delivery Network)

제이쿼리 같은 JS 파일을 직접 로컬에 다운 받지 않고 웹주소 URL 로 통하여 클라이언트가 직접

접속해서 자원을 바로 전달해주는 URL 주소이다.

그냥 URL 주소를 넣으면 주소를 사용할수있다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"> </script>

주소에 http 나 https 를 안붙인 이유는 접속자가

http 나 https 를 이용해서 들어오면 같은 프로토콜을 이용해서 접속하겠다는

상대적인 경로이다.

jquery가 2점대 이상은 IE 6,7,8 은 사용 불가하다.

​

jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹 페이지를 조작할 수 있도록 돕는 도구이다.

​

DOM (Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 문서들을 객체를 사용하여 시각화 표시 한다고 생각하면된다.

웹페이지도 결국 하나의 문서이기 때문이다.

​

​

jQuery 는 javascript의 라이브러리 이다.

라이브러리지만 지금 안쓰는곳이 없다 할정도로

아주 많은 javascript 개발자들이 사용하고있다.

지금 이글을 작성한 지금도 react,view,agular 스펠링이 맞나 모르겠지만...

위 언급한 라이브러리 들이 커지고 있는상황이지만 그래도 아직까지

점유율은 jQuery가 가장 크다.

​

제이쿼리는 $ 로 시작한다

$ <-- 함수를 $의 변수로 저장한것

반응형

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27
반응형



$('li').css('color','red');

제이쿼리는 항상 $로 시작합니다

$ = jquery function 입니다. (제이쿼리 함수다)

$('css 선택자') <-- 대부분 어떤 element 의 css 선택자가 올지를 정한다 # id선택자 . class 선택자 그냥은 태그

$('li') <-- 는 제이쿼리 함수이다 (li 태그의 모든요소들을 객체로 객체로 바꾼결과

​

// $('li') 는 var object2 = (function() { return document.getElementsByTagName('li') });

약간 이런느낌??

​

chaining

$('li').css('color','red').css('textDecoration' , 'underline');

$('li')의 객체를 .css 프로퍼티로 전달햇는대 결국

$('li').css('color','red') 이것도 객체이기 때문에 .css 프로퍼티를 또 붙혀서 사용할수있다

이것을 chaining 라고한다.

내가 이렇게 선택한 엘리먼트 들을 연속적으로 또 메소드를 호출한다

​

​

​

html객체의 이름찾기

<body> <ol> <li name= 'name'>안녕하삼</li> <li id = 'active'>안녕하삼</li> <li class = 'class'>안녕하삼</li> <li>안녕하삼</li> <span id = 'act'>스판</span> </ol> <script> var li = document.getElementById('active'); console.log(li.constructor.name); // HTMLLIElement var li2 = document.getElementById('act'); console.log(li2.constructor.name); // HTMLSpanElement var lis = document.getElementsByTagName('li'); console.log(lis.constructor.name); // HTMLCollection </script> </body>

저렇게 id로 하나만 선택하는 것들은 HTML(엘리먼트이름)Element 가 나오고

Elements로 복수개를 선택하는 것들은 HTMLCollection 으로 나온다

HtmlCollection 은 유사배열이다.

​

DOM Tree

모든 엘리먼트는 HTMLElement의 자식이다.

따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다.

동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고도 있는데, 이것은 성격에 따라서 달라진다.

HTMLElement 는 Element의 자식이고 Element는 Node의 자식이다.

Node는 Object의 자식이다.

이런 관계를 DOM Tree 라고 한다.



Dom Tree (이고잉 자바스크립트 출처) DOM Tree

​

jquery 객체

html collection 은 실시간으로 구조가 변경이된다.

​

​

제어대상찾기

​


반응형

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27
반응형

제이쿼리는 자바스크립트보다 보다 실용적이고 적은 코딩으로 작성하기 때문에 줄임말을 자주사용한다

setAttribute , getAttribute 에 대응 되는 jquery의 메소드는 attr이다.

$('t1').attr('checked'); // getAttribute 고

$('t1').attr('checked' , false); // setAttribute 이다

또한 removeAttribute 에 대응되는 jquery의 메소드는 remobeAttr 이다.

​

제이쿼리에 .attr 은 속성제어자 이고 .prop 는 프로퍼티방식 이다

​

t1.prop('href'); // 은 href 의 값을 가져오는 것이고 get

t1.prop('href','abcd'); // 는 t1.href = 'abcd' 와 같다

​

또 javascript 에서는 속성제어자와 프로퍼티방식이 미묘한 차이가 있다고 했지만

제이쿼리에서는 이것을 내부적으로 보완 해주기 때문에

$('#t1').prop('className' , 'important');

$('#t2').prop('class' , 'important');

는 내부적으로 보완해줘서 서로 같은결과를 나타낸다.

제이쿼리 하위엘리먼트 선택 (조회범위 제한)

<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <ul> <li class="marked">html</li> <li>css</li> <li id="active">JavaScript <ul> <li>JavaScript Core</li> <li class="marked">DOM</li> <li class="marked">BOM</li> </ul> </li> </ul> <script> $(".marked","#active").css("background-color","red"); $("#active .marked").css("background-color","red"); //id값이 active 인 값중에 class가 marked 인 걸 red로 지정한다 $('#active').find('.marked').css("background-color","red"); //id값이 active 인 값중에 class가 marked 인 걸 찾아서 red로 지정한다 //위 3개의 구문은 같다고 봐도된다 $('#active').css('color','blue').find('.marked').css('background-color','red'); //id값이 active 인 값은 글씨 blue 로 그중에 클래스가 .marked인걸 찾아서 배경을 빨강 </script> </body> </html>

​


반응형

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27

+ Recent posts

티스토리툴바