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

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

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

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

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

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

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에서 이동 됨]
목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12357
MySQL 2개 테이블에서 중복된거라도 한개씩만 추출하기 입니다.
12356
MySQL MySQL php함수 정리 입니다.
12355
MySQL MySQL php오류 정리 입니다.
12354
MySQL 연산자 관련함수 정리 입니다.
12353
JavaScript 폼 유효성검사해주는 자바스트립트 라이브러리
20387
기타 텝메뉴 상단고정 및 해당위치 스크롤 4
12352
MySQL 수학 관련함수 정리 입니다.
12351
MySQL 문자열 관련함수 정리 입니다.
12350
MySQL 날짜 관련 함수 정리 입니다.
12349
PHP PHP5.6 -> PHP7.0 으로 이전시 차이점
12348
jQuery Ajax 화면 전환 시 애니메이션 효과
12347
MySQL Query의 기본사용 정리 입니다.
12346
MySQL 자주 사용하는 php와 관련 Query문 입니다.
12345
MySQL 콘솔 기본명령어 정리 입니다
12344
PHP 암호화 SHA-256
12343
MySQL mysql 인덱싱 하는 방법 입니다.
12342
MySQL MySQL 덤프방법(dump) 입니다.
12341
MySQL 여러데이터베이스 사용하는 방법 입니다.
12340
PHP 이미지에 글자쓰기
12339
MySQL 백업&복구(전체/부분/테이블) 하기 입니다.
12338
MySQL db sql문 정리 입니다.
12337
MySQL MySql 암호 초기화 및 새암호 넣기 입니다.
12336
JavaScript 라디오버튼, 체크박스 테두리 없애기 입니다.
12335
JavaScript 현재 페이지 저장하기 입니다.
12334
JavaScript 프린트 출력 자바스크립트 입니다.
이전 다음
전체 목록