ajax로 만든 표를 선택하여 다시 쿼리를 날리고 싶습니다.
본문
<script language="JavaScript">
$(document).ready(function(){
///////////////////////////////////////////////////////////////////////////////////
var Sc={};
var output='';
//화면에 table을 만든다.
Sc.makeTable = function(){
output+='<div class="master_history" style="padding:0; margin:0;">';
output+='<table cellpadding="0" cellspacing="0"width="100%" >';
output+='<tr>';
output+='<th width="3%">담당자</td>';
output+='<th width="5%">사진게시일</td>';
output+='<th width="3%">물건</td>';
output+='<th width="3%">No</td>';
output+='<th width="3%">최종TM일</td>';
output+='<th width="3%">확인자</td>';
output+='<th width="4%">최종수정일</td>';
output+='<th width="3%">사진</td>';
output+='<th width="3%">동</td>';
output+='<th width="3%">번지</td>';
output+='<th width="3%">건물명</td>';
output+='<th width="3%">층수</td>';
output+='<th width="3%">호수</td>';
output+='<th width="3%">공실</td>';
output+='<th width="3%">보증금</td>';
output+='<th width="3%">월세금</td>';
output+='<th width="3%">전세금</td>';
output+='<th width="3%">관리비</td>';
output+='<th width="3%">실평수</td>';
output+='<th width="3%">계약자</td>';
output+='<th width="3%">계약일</td>';
output+='</tr>';
output+='</table>';
output+='</div>';
$('#view1').append(output);
}
///////////////////////////////////////////////////////////////////////////////////
Sc.makeTable();
$("#search_click").click(function(){
var params = jQuery("#search_form").serialize()
alert ("검색시작");
$.ajax ({
url:"<?php echo G5_SUPER_URL?>/module/ajax.php",
type: "POST",
data: params, //{ post_data:post_data },
dataType: "html",
success:function(data) { //success 첫째 줄
//////////////////////////////////////////////////////////////////////////////////
console.log(data);
var data = JSON.parse(data);
for(var i=0;i<data.length;i++) {
//테이블에 데이터를 출력한다.
Sc.setData = function(){
var tmp ="";
for(var i=0;i<data.length;i++) {
tmp+='<tr>';
tmp+='<td>'+data[i]['MANGER_NM']+'</td><td>'+data[i]['CREATE_FIRST_DATE']+'</td><td>'+data[i]['BUILD_ID']+'</td><td>'+data[i]['BUILD_SEQ']+'</td><td>'+data[i]['null']+'</td><td>'+data[i]['MANGER_NM']+'</td><td>'+data[i]['CHANGE_DATE']+'</td><td>'+data[i]['IS_PICTURE']+'</td><td>'+data[i]['DONG']+'</td><td>'+data[i]['BUNJI']+'</td><td>'+data[i]['BUILDING_NM']+'</td><td>'+data[i]['FLOOR']+'</td><td>'+data[i]['FLOOR_DTL']+'</td><td>'+data[i]['VACANCY_DIVISION']+'</td><td>'+data[i]['DEPOSIT_AMT']+'</td><td>'+data[i]['MONTHLY_RENT_AMT']+'</td><td>'+data[i]['KEY_MONEY_RENT_AMT']+'</td><td>'+data[i]['MANAGEMENT_EXPENSE_AMT']+'</td><td>'+data[i]['EXCLUSIVE_AREA_PY']+'</td><td>'+data[i]['null']+'</td><td>'+data[i]['CONTRACT_DATE']+'</td>';
tmp+='</tr>';
}
$('table').append(tmp);
};
};
//////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
Sc.setData();
});
} //success 마지막 줄
})//$ajax문 끝
})//click문 끝
});
</script>
위 소스를 만들어서 쿼리를 날려서 다시 받아온 다음 표를 만들어주는 것까지는 했습니다.
그런데 표를 선택해서 선택된 해당 값을 가지고 다시 한번 쿼리를 날려야 하는데요
어떻게 해야 선택한 줄의 데이터를 가져오는지를 모르겠습니다;;;;
어떻게 처리해야 하나요?
답변 1
클릭한 tr 에 대해서 가져오는 부분만 간단하게 구성해봤습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function tr_data(row) {
// 1. tag-string from row
// alert($(row).html());
// 2. array from cell
var cells = [];
$(row).children().each(function () {
cells.push($(this).html());
});
alert(cells);
}
$(document).ready(function () {
var Sc={};
var output='';
//화면에 table을 만든다.
Sc.makeTable = function(){
output+='<div class="master_history" style="padding:0; margin:0;">';
output+='<table cellpadding="0" cellspacing="0" width="100%" border="1">';
output+='<tr onclick="tr_data(this)">';
output+='<th width="3%">담당자</td>';
output+='<th width="5%">사진게시일</td>';
output+='<th width="3%">물건</td>';
output+='</tr>';
output+='<tr onclick="tr_data(this)">';
output+='<td width="3%">1-1</td>';
output+='<td width="5%">1-2</td>';
output+='<td width="3%">1-3</td>';
output+='</tr>';
output+='<tr onclick="tr_data(this)">';
output+='<td width="3%">2-1</td>';
output+='<td width="5%">2-2</td>';
output+='<td width="3%">2-3</td>';
output+='</tr>';
output+='</table>';
output+='</div>';
$('#view1').append(output);
}
///////////////////////////////////////////////////////////////////////////////////
Sc.makeTable();
});
</script>
</head>
<body>
<div id="view1"></div>
</body>
</html>
하아... 이런 새벽의 천사 같으신 분이 있나요...ㅠㅠ
덕분에 집에 가요 ㅠㅠ
감사합니다!! 위에서 배열로 가져오는데 만약에 build_id만 가져오고 싶다면 var cell = [] 배열에 어떻게 처리해야 되나요? 그 부분도 좀 알려주시면 정말정말 지금도 감사하지만 더 감사하겠습니다!!
어렵게 생각하실 필요 없습니다.
반복되는 순서이면 해당 순서일 경우만 연산하면 됩니다.
BUILD_ID 라는 것이 3번째 td 에 위치한다면
// 2. array from cell
var cells = [];
//$(row).children().each(function () {
// cells.push($(this).html());
//});
$(row).children().each(function (index, element) {
if (index == 2) {
cells.push($(this).html());
}
});
이렇게만 해주면 될 것 같습니다.
jQuery.each 에 대해서는
http://api.jquery.com/jquery.each/
참조하시면 됩니다.
또는 단순 for 구문을 사용한다 하더라도 동일합니다. (i == 2)
네 졸려서 아무 생각이 안났나봐요 ㅎㅎ
집에오면서 생각하고 집에와서 변경해서 처리했어요 그냥 json.parse로 데이터 처리해서 for문 돌렸어요^^
야밤에 도움주셔서 진심으로 감사드려요^^
