동적테이블, 행추가, 열추가, 행삭제, 열삭제 2
아래의 코드에는 버그가 있네요. 다시 올립니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<form method=post action="a2_post.php">
<input type=button value="행추가" onclick="add_row();">
<input type=button value="열추가" onclick="add_col();">
<input type=button value="행삭제" onclick="del_row();">
<input type=button value="열삭제" onclick="del_col();">
<table id='stock_table' border=1>
<thead id='stock_thead'>
<tr>
<td>
<input type=text name=opty size=4>
<input type=text name=optx size=4>
</td>
<td>
<input type=text name='optx_subj[]' size=10>
</td>
</tr>
</thead>
<tbody id='stock_tbody'>
<tr>
<td><input type=text name='opty_subj[]' size=10></td>
<td><input type=text name='opt[0][]' size=10></td>
</tr>
</tbody>
</table>
<input type=submit>
</form>
<span id=msg></span>
<script>
var stock_table = document.getElementById('stock_table');
var stock_thead = document.getElementById('stock_thead');
var stock_tbody = document.getElementById('stock_tbody');
var stock_tr = null;
var stock_td = null;
var stock_x = 0;
var stock_y = 0;
var msg = document.getElementById('msg');
function add_row()
{
// 행 제목 추가
stock_tr = document.createElement('tr');
stock_tbody.appendChild(stock_tr);
stock_td = document.createElement('td');
stock_tr.appendChild(stock_td);
add_input('opty_subj[]');
stock_y++;
// 열의 갯수에 따라 추가된 행의 열 추가
var stock_thead_td = stock_thead.getElementsByTagName('td');
for (i=0; i<stock_thead_td.length-1; i++)
{
stock_td = document.createElement('td');
stock_tr.appendChild(stock_td);
add_input('opt['+stock_y+'][]');
}
}
function add_col()
{
// 열 제목 추가
var stock_thead_tr = stock_thead.getElementsByTagName('tr');
stock_td = document.createElement('td');
stock_thead_tr[0].appendChild(stock_td);
add_input('optx_subj[]');
var stock_tbody_tr = stock_tbody.getElementsByTagName('tr');
for (i=0; i<stock_tbody_tr.length; i++) {
stock_td = document.createElement('td');
stock_tbody_tr[i].appendChild(stock_td);
add_input('opt['+i+'][]');
}
}
function add_input(name)
{
var inp = document.createElement('input');
inp.setAttribute('type', 'text');
inp.setAttribute('size', '10');
inp.setAttribute('name', name);
stock_td.appendChild(inp);
}
function del_row()
{
var stock_tbody_tr = stock_tbody.getElementsByTagName('tr');
if (stock_tbody_tr.length > 1) {
stock_tbody.deleteRow(stock_tbody_tr.length-1);
stock_y--;
}
}
function del_col()
{
var stock_thead_tr = stock_thead.getElementsByTagName('tr');
var stock_thead_td = stock_thead.getElementsByTagName('td');
if (stock_thead_td.length > 2) {
stock_thead_tr[0].deleteCell(stock_thead_td.length-1);
var stock_tbody_tr = stock_tbody.getElementsByTagName('tr');
for (i=0; i<stock_tbody_tr.length; i++) {
var tr_td = stock_tbody_tr[i].getElementsByTagName('td');
stock_tbody_tr[i].deleteCell(tr_td.length-1);
}
}
}
</script>
</BODY>
</HTML>
댓글 3개
그런데 이런거는 어때요????
http://recall.tistory.com/169
얼마전 허접멀티옵션 작업 했었는데.. 기다릴걸 그랬나;
<tr id="first" >
<td>1</td>
function add() {
var root = document.getElementById( "first").parentNode;
var clone= document.getElementById( "first").cloneNode( true);
var cells= clone.getElementsByTagName("input");
for( i=0; i< cells.length; i++) if( cells[i].type=="text") cells[i].value='';
clone.firstChild.innerText=++seq;
root.appendChild( clone);
}
<td안에 <input type="text"가 있는 경우.......
게시글 목록
| 번호 | 제목 |
|---|---|
| 13454 | |
| 29442 |
HTML
php 에서 xml 자유롭게 쓰기
4
|
| 13451 | |
| 13448 |
jQuery
자동등록방지코드
2
|
| 13446 | |
| 13445 |
jQuery
ajax modal window (ajax 모달창)
|
| 13442 |
jQuery
간단하게 Round, 그라디언트 처리하기!!
2
|
| 13439 | |
| 13437 | |
| 13434 | |
| 13429 | |
| 13425 | |
| 13423 | |
| 13418 |
jQuery
탭메뉴
4
|
| 13410 | |
| 13408 | |
| 13407 | |
| 13406 |
기타
수학 함수 모음
|
| 29441 |
HTML
변수 함수 모음
|
| 13405 |
JavaScript
URL 함수 모음
|
| 13404 |
기타
디렉토리 함수 모음
|
| 13401 |
JavaScript
파일 함수 모음
2
|
| 13400 |
기타
문자열 함수 모음
|
| 13399 | |
| 13395 |
MySQL
Mysql 날짜관련 함수 모음
3
|
| 13391 |
jQuery
jquery scrolling menu
3
|
| 29435 | |
| 13389 |
JavaScript
정규 표현식 입문서? "손에 잡히는 정규 표현식"
1
|
| 13386 |
정규표현식
정규표현식 검사기
2
|
| 13381 |
jQuery
Jquery 체크박스 사용법
4
|
| 13377 |
Flash
sql 인젝션 복구쿼리
3
|
| 13370 |
JavaScript
페이지 자동이동하기 팁(여기 없는 거)
6
|
| 13367 |
MySQL
mysql 유저 생성, 권한 부여
2
|
| 13366 |
JavaScript
자바스크립트 쿠키 생성, 삭제
|
| 13364 | |
| 13362 | |
| 29432 | |
| 29428 |
HTML
엔터치면 다음칸으로 이동.
3
|
| 13361 |
jQuery
IBM 한국 jQuery 기술자료
|
| 13360 | |
| 13358 | |
| 13354 | |
| 13351 |
JavaScript
이미지 자동으로 사이즈 정해주는 방법은 어떻게 하나요?
2
|
| 29427 | |
| 13346 | |
| 13340 |
jQuery
lightbox 수정 2차 완료
5
|
| 13337 | |
| 13334 | |
| 13328 |
jQuery
선물입니다.
5
|
| 13326 |
JavaScript
virtual hosts
1
|
| 13325 |
기타
asp 글 삭제하기
|
| 13324 |
기타
asp 글 수정하기
|
| 13323 |
기타
asp 글읽기
|
| 29426 |
HTML
asp 목록보기
|
| 13322 |
JavaScript
asp 저장하기
|
| 13321 |
기타
asp 글쓰기
|
| 13315 | |
| 29424 | |
| 13312 |
JavaScript
오픈 api 에 사용할 XML 파서 따끈한거 테스트 부탁드립니다....^^
2
|
| 29422 | |
| 25114 | |
| 13308 | |
| 13307 | |
| 13305 |
JavaScript
if문 축약해 사용하기
1
|
| 13304 |
JavaScript
체크 상자 몇개 이상 채크시 경고창 및 개수이상 클릭못하게하기
|
| 25111 | |
| 29421 |
HTML
테이블 복사
|
| 13301 | |
| 13299 | |
| 13296 |
jQuery
별거는 아니지만
2
|
| 13292 |
JavaScript
[VIM] vim으로 소스코드 범위 설정하여 영역을 접고 펴기
3
|
| 13291 | |
| 13290 |
JavaScript
"웹표준에 관한 타입 선언"- 필요하신 분은 참고하세요...
|
| 13289 | |
| 13288 | |
| 13287 | |
| 13286 | |
| 13285 | |
| 13284 |
기타
아파치 설치문서
|
| 29420 | |
| 13283 |
JavaScript
글자 쪼개서 배열에 넣기
|
| 13277 | |
| 13274 | |
| 13266 |
MySQL
MySQL 상태보기 (MySQL튜닝하기)
7
|
| 13265 | |
| 13262 | |
| 13261 |
jQuery
링크 관련 활용
|
| 13259 |
MySQL
Slow Query Log
1
|
| 13254 |
JavaScript
폼의 첫번째 입력가능한 필드에 FOCUS 주기
4
|
| 13250 | |
| 29419 | |
| 13242 | |
| 13241 | |
| 13236 | |
| 13235 | |
| 29418 |
HTML
레이어 좌표 이동-1
|
| 29417 |
HTML
프레임 제어속성
|
| 13234 | |
| 13233 | |
| 13231 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기