자바스크립트 - 스크립트 내에서 HTML 테이블 생성

자바스크립트 - 스크립트 내에서 HTML 테이블 생성

아래와 같이 htmlStr에 태그를 넣어서 제이쿼리로 $("#id").html( htmlStr ); 이렇게 해주면

HTML에 id가 list인 DIV안에 테이블이 생성됩니다.

json값이면 each로 돌리거나 for문으로도 넣어줄수있습니다.

주의하실점은 <input>태그에서 함수나 "를 많이사용하는경우에서는

"앞에 \를 넣어서 써주시면 "를 문자로 처리합니다.

ex) htmlStr = " <input type=\"button\" onclick=\" 함수( \'"+데이터1+"\', \'"+데이터2+"\' ) \"> "

위와같이 써주면 되겠습니다. 생각보다 되게 헷갈리니까 주의해주세요.

자바스크립트

function 함수1(){

var htmlStr = "";

htmlStr += "<table>";

// jquery를 이용한 JSON 결과 데이터 파싱

$(jsonStr.results.juso).each(function(){

htmlStr += "<tr>";

htmlStr += "<td>"+this.zipNo+"</td>";

htmlStr += "<td>"+this.roadAddrPart1+this.roadAddrPart2+"</td>";

htmlStr += "<td><input type=\"button\" onclick=\"함수()\"></td>";

htmlStr += "</tr>";

});

htmlStr += "</table>";

// 결과 HTML을 FORM의 결과 출력 DIV에 삽입

$("#list").html(htmlStr);

}

JSP - HTML

<div id="list"> <!-- 검색 결과 리스트 출력 영역 --> </div>