728x90
반응형
사원 전체 리스트 정보 조회하기
1. body
<body>
<h1>데이터 가져오기</h1>
<fieldset>
<legend>사원 전체 조회</legend>
<input type="button" value="조회" id="emp_search"/>
</fieldset>
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
</body>
2. script
<style type="text/css">
*{margin:0; padding:0;}
table{width:900px;}
table tr:nth-child(1){background: orange;}
fieldset{width:400px;}
body{width: 1000px; margin: 50px auto;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="resources/js/create_table.js"></script>
<script type="text/javascript">
$(function(){
$("#emp_search").click(function(){
$.ajax({
url: "emplist.xml", // 여기경로에 있는
dataType: "xml", // 이 파일이
success: function(data){ // 여기 data로 들어감
var empRowList = $(data).find("ROW");
$("body").append(makeTable(empRowList));
},
error: function(){
alert("통신실패");
}
});
});
});
</script>
makeTable(empRowList)함수를 createTable.js 파일로 resources안에 담아주어 아래와 같이 활용했다.
사실 같은 스크립트 안에 적어주어도 된다.
function makeTable(elem){
$table = $("<table border=1>"); // (var 생략할 경우) 전역변수 취급 가능
// var : 함수영역
// let/const :블록영역 좀더 분명함
for(var i = 0; i<1; i++){
$tr = $("<tr>");
for(var j = 0; j< elem.eq(0).children().length; j++){
$td = $("<td>").append(elem.eq(0).children().eq(j).prop("tagName"));
$tr.append($td);
}
$table.append($tr);
}
for(var i = 0; i<elem.length; i++){
$tr = $("<tr>");
for(var j = 0; j<elem.eq(i).children().length; j++){
$td = $("<td>").append(elem.eq(i).children().eq(j).text());
$tr.append($td);
}
$table.append($tr);
}
return $table;
}
728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]체크박스 (0) | 2020.08.06 |
|---|---|
| [JQ]ajax_01 (0) | 2020.08.05 |
| [JQ]delete (0) | 2020.08.05 |
| [JQ]wrap (0) | 2020.08.05 |
| [JQ]외부삽입 (0) | 2020.08.04 |
