나름 table 건드리면서.. 작업하기 예제 입니다.
<BODY text=black vLink=purple aLink=red link=blue bgColor=white leftMargin=0
topMargin=0 marginheight="0" marginwidth="0" >
<table border="1">
<thead>
<tr>
<th colspan="3" align="center">묶음배송 불가 아이템 선택 (<%= itemDTO.getItem_name() %>)</th>
</tr>
<tr>
<th>아이템</th><th>action</th><th>묶음배송 불가 아이템</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="tree" >
<%
SQL = " select a.cate_code, a.cate_name, b.item_code, b.item_name, b.imgA from t_cate a, t_item b "
+ " where a.cate_code=b.cate_code and a.delete_yn='N' and b.delete_yn='N' and a.domainname='"+domainName+"' and b.imgA != '' "
+ " order by a.cate_code, b.disp_order";
//cate_code | cate_name | item_code | item_name | imgA
list = bdao.listHS (SQL);
if(list != null) {
String m1 = "";
for(int i=0; i<list.size(); i++) {
Hashtable ht = (Hashtable)list.get(i);
String cate_code = (String)ht.get("cate_code");
String cate_name = (String)ht.get("cate_name");
String item_code = (String)ht.get("item_code");
String item_name = (String)ht.get("item_name");
String imgA = (String)ht.get("imgA");
if(m1.indexOf(cate_code) == -1) {
// new cate_code find
if(!m1.equals("")) out.println("</ul>");
out.println("<ul>"+ cate_name);
m1 += "," + cate_code;
}
out.println ("<li><a data0='"+item_code+"' data1='"+imgA+"' href='#'>"+item_name+"</a></li>");
}
out.println("</ul>");
}
%>
</div>
</td>
<td id="actiontd" valign="top">
<span id="item_desc">
</span>
<br/>
<a data0="add" href="#">더하기 >>> </a>
<br/>
<a data0="rem" href="#">빼 기 <<< </a>
</td>
<td valign="top" align="center">
<div id="itemaction">
<a href="#">저장</a>
</div>
<table id="targetitem">
<%
SQL = " select a.item_code, a.item_name, b.itemsub_seq, b.targetcode, b.opt01 from t_item a, t_itemsub b "
+ " where a.item_code=b.item_code and a.delete_yn='N' and b.ptype='A' and b.item_code='"+ itemDTO.getItem_code() +"' order by a.item_name";
list = bdao.listHS (SQL);
if(list != null) {
for(int i=0; i<list.size(); i++) {
Hashtable ht = (Hashtable)list.get(i);
String item_code = (String)ht.get("item_code");
String item_name = (String)ht.get("item_name");
String targetcode = (String)ht.get("targetcode");
String opt01 = (String)ht.get("opt01");
out.println ("<tr><td><input type='checkbox' value='"+item_code+"'/></td><td>"+item_name+"</td></tr>");
}
}
%>
</table>
</td>
</tr>
</tbody>
</table>
</BODY></HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var gxCurItem = { ixc:'', ixn:'', ixm:'' }
isAleadyIn = function(ixc) {
var found = false;
$('table#targetitem input').each(function() {
if($(this).attr('type') == 'checkbox' && $(this).attr('value') == ixc) {
found = true;
return true;
}
});
return found;
}
$(document).ready(function() {
naraJsTreeInit ();
$('#actiontd a').button();
$('#actiontd a').click(function() {
var data0 = $(this).attr('data0');
if(data0 == 'add') {
if(!isAleadyIn(gxCurItem.ixc)) $('table#targetitem').append("<tr><td><input type='checkbox' value='"+gxCurItem.ixc+"'/></td><td>"+gxCurItem.ixn+"</td></tr>");
}
else if(data0 == 'rem') {
$('table#targetitem input:checked').each(function() {
$(this).parent().parent().remove() ;
});
}
//
});
$('li a').click(function() {
gxCurItem.ixn = $(this).text();
gxCurItem.ixc = $(this).attr('data0');
gxCurItem.ixm = $(this).attr('data1');
var xh = '<img src="'+gxCurItem.ixm+'" border="0"/>';
xh +='<div>' + gxCurItem.ixn + '</div>';
$('#actiontd span#item_desc').html (xh);
});
$('div#itemaction a').button();
$('div#itemaction a').click(function() {
// save it
});
});
//-->
</SCRIPT>