□ | 성명 | 나이 | 성별 |
□ | 홍길동 | 23 | 여 |
□ | 파파룰라 | 25 | 남 |
□ | 뽀로로 | 12 | 남 |
◐ Script_팝업창
function btnChoice() {
if (($("input[name=chkObjPop").is(":checked"))) { // 체크된 건이 한 건이라도 있으면
var sendData = {};
var j = 0;
for(var i=0; i<$("[name='chkObjPop']:checked").length; i++) {
var idv = $("[name='chkObjPop']:checked").eq(i).val();
var checkObj = $("[name='chkObjPop']:checked").eq(i).closest("tr");
sendData[j] = { "name" : checkObj.find("td:eq(1)").text()
, "age" : checkObj.find("td:eq(2)").text()
, "gender" : checkObj.find("td:eq(3)").text()
, "dbKey" : idv
}
j++ ;
}
parent.fn_addRow(sendData, j); // 부모창 함수 호출
} else {
alert("선택된 항목이 없습니다.");
}
}
◐ Script_부모창 (추가 데이터 받아서 Row 생성)
function fn_addRow(addData, chkCnt) {
if (Number(chkCnt) > 0) {
var tblObj = $("#testTbl > tbody:last");
for(var k=0; k<Number(chkCnt); k++) {
var orw = $("<tr></tr>");
var rChk = $("<td><input type='checkbox' name='chkObject' value='"+addData[k].dbKey+"'></td>");
var rName = $("<td></td>").text(addData[k].name);
var rAge = $("<td></td>").text(addData[k].age );
var rGender = $("<td></td>").text(addData[k].gender);
tblObj.append(row);
row.append(rChk);
row.append(rName);
row.append(rAge);
row.append(rGender);
}
}
}
◐ HTML_팝업창
<table summary="Test" cellpadding="0" cellspacing="0" id="testTbl">
<caption> Test </caption>
<colgroup>
<col width="10%"/>
<col width="30%"/>
<col width="30%"/>
<col width="30%"/>
</colgroup>
<thead>
<th scope="col"><input type="checkbox" onClick="fn_allCheckedPop();" /></th>
<th scope="col">성명</th>
<th scope="col">나이</th>
<th scope="col">성별</th>
</thead>
<tbody>
<c:choose>
<c:when test="${!empty testList}">
<c:forEach begin="0" var="testList" items="${testList}" varStatus="index">
<tr>
<td><input type="checkbox" name="chkObjectPop" value="${testList.testKey} /></td>
<td>${testList.testName}</td>
<td>${testList.testAge}</td>
<td>${testList.testGender}</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr><td colspan="4">검색결과가 없습니다.</td></tr>
</c:otherwise>
</c:choose>
</tbody>
</table>
<div>
<a href="#" onClick="fn_btnChoice()">선택</a>
</div>