테스트 사이트 - 개발 중인 베타 버전입니다
SIR

동적테이블, 행추가, 열추가, 행삭제, 열삭제

관리자
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 17년 전 · 4244

옵션에 사용하기 위해 만들어본 코드입니다.

테스트 해본 코드이므로 별 이상은 없을것 같습니다.

동적테이블 정보가 필요하신 분들은 참고하세요.

IE, FF, 크롬에서 실행되는 것을 확이하였습니다.



<!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_tr();">
<input type=button value="열추가" onclick="add_td();">
<input type=button value="행삭제" onclick="del_row();">
<input type=button value="열삭제" onclick="del_col();">
<table id='tbl' border=1>
    <thead id='thd'>
        <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='tbd'>
        <tr>
            <td><input type=text name='opty_subj[]' size=10></td>
            <td><input type=text name='opt[][]' size=10></td>
        </tr>
    </tbody>
</table>

<input type=submit>
</form>

<span id=msg></span>

<script>
var tbl = document.getElementById('tbl');
var thd = document.getElementById('thd');
var tbd = document.getElementById('tbd');
var tr = null;
var td = null;
var x=1, y=1;

function add_tr()
{
    // 행 제목 추가
    tr = document.createElement('tr');
    tbd.appendChild(tr);
    td = document.createElement('td');
    tr.appendChild(td);
    add_input('opty_subj[]');

    // 열의 갯수에 따라 추가된 행의 열 추가
    var thd_td = thd.getElementsByTagName('td');
    for (i=0; i<thd_td.length-1; i++)
    {
        td = document.createElement('td');
        tr.appendChild(td);
        add_input('opt[][]');
    }
}

function add_td()
{
    // 열 제목 추가
    var thd_tr = thd.getElementsByTagName('tr');
    td = document.createElement('td');
    thd_tr[0].appendChild(td);
    add_input('optx_subj[]');

    var tbd_tr = tbd.getElementsByTagName('tr');
    for (i=0; i<tbd_tr.length; i++) {
        //var td_tag = tr_tag[i].getElementsByTagName("td");
        td = document.createElement('td');
        tbd_tr[i].appendChild(td);
        add_input('opt[][]');
    }
}

function add_input(name)
{
    var inp = document.createElement('input');
    inp.setAttribute('type', 'text');
    inp.setAttribute('size', '10');
    inp.setAttribute('name', name);
    td.appendChild(inp);
}

function del_row()
{
    var tbd_tr = tbd.getElementsByTagName('tr');
    //document.getElementById('msg').innerHTML = tbd_tr.length;
    if (tbd_tr.length > 1)
        tbd.deleteRow(tbd_tr.length-1);
}

function del_col()
{
    var thd_tr = thd.getElementsByTagName('tr');
    var thd_td = thd.getElementsByTagName('td');
    //document.getElementById('msg').innerHTML = thd_td.length;
    if (thd_td.length > 2) {
        thd_tr[0].deleteCell(thd_td.length-1);

        var tbd_tr = tbd.getElementsByTagName('tr');
        for (i=0; i<tbd_tr.length; i++) {
            var tr_td = tbd_tr[i].getElementsByTagName('td');
            tbd_tr[i].deleteCell(tr_td.length-1);
        }
    }
}
</script>

</BODY>
</HTML>

[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
384
알고있으면 유용한 무료 디자인소스 사이트
12508
JavaScript 서버시간 알아내기
383
css 템플릿 사이트
381
모바일 ui 사이트 1
20395
기타 swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현
12507
PHP 숫자를 한글표기로 바꾸기 입니다.
12506
Mobile Android,IOS 앱용 아이콘 템플릿 참고 사이트
12505
PHP 여러문장을 한번에 자동 줄바꿈 하기 입니다.
12504
웹서버 서버 동시접속자 설정 변경하기
12503
PHP 디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.
12502
PHP PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수
12500
PHP 간단하게 자동으로 테이블 너비 조정하기 입니다. 1
12499
PHP 문자열자르기 (문자별 다른 너비 해결)
12498
MySQL 테이블 복사 쿼리
20392
기타 많이들 사용하시는 Slider 에 대해서... 2
12497
PHP 현재 접속중인 사용자 나타내기
12496
MySQL mysql select 후 update 하기
12495
PHP 다른 페이지로 이동하는 방법 3가지 입니다.
12494
PHP 한글문자열 자르는 법 입니다.
12493
PHP mysql_query 전체 갯수 빨리 알아보기 입니다.
12492
PHP POST값 통째로 인코딩하기, 배열, iconv
12491
PHP 이메일주소 검사하기 입니다.
12490
웹서버 php 확장자 내 맘대로 바꾸기 입니다.
12489
PHP 문자열을 한 문자씩 나누어 출력하기 입니다.
12488
node.js Node js 게시판 프로젝트 소개합니다.
다음
전체 목록