jQuery 동적테이블
불당님이 jQuery 하시길래 몇일 살펴보았는데 상당히 만족스럽네요.
처음 만들어보는거라 코드가 지저분합니다.
jQuery 잘 아시는 분들은 수정 후 좀 알려주십시오.
<input type=button value='행추가' id='add-row'>
<input type=button value='열추가' id='add-col'>
<input type=button value='행삭제' id='del-row'>
<input type=button value='열삭제' id='del-col'>
<table id='stock_table' border=0>
<thead id='stock_thead'>
<tr>
<td>
<input type=text name=it_opty_subj size=4 class=ed value='<?=$it[it_opty_subj]?>'>
<input type=text name=it_optx_subj size=4 class=ed value='<?=$it[it_optx_subj]?>'>
</td>
<td>
<input type=text name='optx_subj[0]' size=5 class=ed>
</td>
</tr>
</thead>
<tbody id='stock_tbody'>
<tr>
<td><input type=text name='opty_subj[0]' size=10 class=ed></td>
<td><input type=text name='opt[0][0]' size=5 class=ed></td>
</tr>
</tbody>
</table>
... 중략 ...
<script>
var stock_x = 0;
var stock_y = 0;
$(document).ready(function() {
// 행추가
$('#add-row').click(function() {
stock_y++;
var s = "<tr>";
s += "<td><input type=text name='opty_subj["+stock_y+"]' size=10 class=ed></td>"; // 행 제목 추가
var len = $('#stock_thead td').length; // 열의 갯수에 따라 추가된 행의 열 추가
for (i=0; i<len-1; i++) {
s += "<td><input type=text name='opt["+stock_y+"]["+i+"]' size=5 class=ed></td>";
}
s += "</tr>";
$('#stock_tbody').append(s);
});
// 열추가
$('#add-col').click(function() {
stock_x++;
$('#stock_thead tr').append("<td><input type=text name='optx_subj["+stock_x+"]' size=5 class=ed></td>");
$('#stock_tbody tr').each(function(index) {
$(this).append("<td><input type=text name='opt["+index+"]["+stock_x+"]' size=5 class=ed></td>");
});
});
// 행삭제
$('#del-row').click(function() {
if (stock_y > 0) {
$('#stock_tbody tr:last').remove();
stock_y--;
}
});
// 열삭제
$('#del-col').click(function() {
if (stock_x > 0) {
$('#stock_thead td:last').remove();
$('#stock_tbody tr').each(function(index) {
$('td:last', this).remove();
});
stock_x--;
}
});
});
</script>
댓글 4개
<script language="JavaScript" src="<?="$g4[path]/js/board.js"?>"></script>
<script language="JavaScript">
window.onload=function() {
resizeBoardImage(<?=(int)$board[bo_image_width]?>);
drawFont();
}
</script>
차후에는 전부 jQuery 로 ~