웹모아

폼태그(입력)

△테이불 추가 스크립트

2007-09-04 20:48:11

댓글:(0) 조회:891

<SCRIPT LANGUAGE="JavaScript">
    var fNum = 1;
    //인덱스로 찾지 않아도 되므로 소스가 복잡하지 않음.
    function getObj()
    {
        var obj = event.srcElement
        while (obj.tagName !='TD') //TD가 나올때까지의 Object추출
        {
            obj = obj.parentElement
        }
        return obj
    }

    //클릭한 행 삭제하기
    function delRow()
    {
        var idx = getObj().parentElement.rowIndex;
        //해당 클릭행 삭제하기 위해 +1안함.
        var tRow = tb1.deleteRow(idx);
    }

    //맨 아래쪽에 테이블 추가하기 ("최초에 추가"글씨를 눌렀을때 맨아래 추가하기 위한 함수)
    function inRowLast()
    {
        if(fNum > 5000) { return false; } //5000개 까지만 추가를 허용하겠다는 설정입니다.
        else {
            //웹브라우져에 따른 설정.
            //익스플로어일때,
            if(document.getElementById){
                var Tbl = document.getElementById('tb1');
            }
            //그외 브라우져일때..
            else
            {
                var Tbl = document.all['tb1'];
            }

            var tRow = Tbl.insertRow();  //그냥 맨 아래에 추가하므로, 별다른 변수없습니다.
            var uploadOBJ = "<table border=1 width=\"700\"><tr><td width=\"3\">";
            uploadOBJ += fNum;
            uploadOBJ +="</td><td width=\"100\">들여쓰기</td><td><input type=radio value=0 name='index"+fNum+"'>맨앞";
            uploadOBJ +="<input name='index"+fNum+"' type=radio value=1>1칸";
            uploadOBJ +="<input name='index"+fNum+"' type=radio value=1>2칸";
            uploadOBJ +="<input name='index"+fNum+"' type=radio value=1>3칸";
            uploadOBJ += "</tr><tr><td></td><td>목차내용</td><td><textarea rows=3 cols=80 name='toc"+fNum+"'></textarea></td>";
            uploadOBJ += "<tr><td></td><td>페이지</td><td><input type=text name='page"+fNum+"' size=11></td><td>";
            uploadOBJ += "</td></tr></table>";
            uploadOBJ += "<center><a href=#; onclick='inRow();'><input type=button value=' + '></a>";
            uploadOBJ += "<a href=#; onclick='delRow();'><input type=button value=' - '></a>";
            tRow.insertCell(0).innerHTML = uploadOBJ;
            fNum++;
        }
    }//End of function

    //클릭된 셀의 아래쪽에 로우를 추가.
    function inRow()
    {
        if(fNum > 5000) { return false; }
        else {

            if(document.getElementById){
                var Tbl = document.getElementById('tb1');
            }
            else
            {
                var Tbl = document.all['tb1'];
            }

            var idx = getObj().parentElement.rowIndex + 1;
                       //위의 getObj()함수에서 object를 가져온후, .rowIndex로 인덱스를 따옵니다.
                       //+1하면 클릭한 위치의 아래에 테이블을 추가합니다.
            alert(idx); //클릭한 위치를 창으로 한번 확인해봤습니다.^^
            var tRow = tb1.insertRow(idx); //해당 인덱스 위치에 추가합니다.
                                                       //tb1은 맨아래 html에서 보이듯이 처음 table의 id입니다.

            for (var i = 0; i < tb1.rows(0).cells.length; i++)
            {
                var c = tb1.rows(idx).insertCell(i)

                if (i == 0){
                    var uploadOBJ = "<table border=1 width=\"700\"><tr><td width=\"3\">";
                    uploadOBJ += fNum;
                    uploadOBJ +="</td><td width=\"100\">들여쓰기</td><td><input type=radio value=0 name='index"+fNum+"'>맨앞";
                    uploadOBJ +="<input name='index"+fNum+"' type=radio value=1>1칸";
                    uploadOBJ +="<input name='index"+fNum+"' type=radio value=1>2칸";
                    uploadOBJ +="<input name='index"+fNum+"' type=radio value=1>3칸";
                    uploadOBJ += "</td></tr><tr><td></td><td>목차내용</td><td><textarea rows=3 cols=80 name='toc"+fNum+"'></textarea></td>";
                    uploadOBJ += "<tr><td></td><td>페이지</td><td><input type=text name='page"+fNum+"' size=11></td><td>";
                    uploadOBJ += "</td></tr></table>";
                    uploadOBJ += "<center><a href=#; onclick='inRow();'><input type=button value=' + '></a>";
                    uploadOBJ += "<a href=#; onclick='delRow();'><input type=button value=' - '></a>";
                    //tRow.insertCell(0).innerHTML = uploadOBJ;
                    c.innerHTML = uploadOBJ;
                    fNum++;
                }//End of if
            }//Enf of for
        }//End of if(fNum >5000)
    }//End of function

</script>
<a href='#;' onclick='inRowLast();'>추가</A>
<table id="tb1">
</table>

실행해보기 (실행2)

댓글(0) <<더보기>>

폼태그(입력)

페이지: 1 / 2


△select박스에 텍스트 벨류를요 카페에서 메뉴를	732
△iframe 에서 text field 값 얻어 오기	1080
△select 상자 그룹 예제	848
△ 숫자만, 영문만, 한글만 입력하고 싶을 때	1123
△INPUT : 숫자만 입력하기	881
△입력박스에 특수문자 입력못하게 하려면	814
△row 추가 2	782
△ [RE] row 추가 2 - 테이블이름 지정	888
△ [RE] row 추가 2 - 테이블이름 지정-삭제	732
△추가, 삭제 누르면서 테이블 행추가, 삭제하기 스크	800
△row 추가	861
△테이불 추가 스크립트	892
△입력박스에 안내메세지 넣기(홈마스타)	907
△동적으로 객체를 변경하는 자바스크립트(홈마스타)	848
△자바스크립트를 써서 폼구문안에 전송(submit)하(홈마스타)	713

△ [RE] 자바스크립트를 써서 폼구문안에 전송(sub(홈마스타)	720
△테이블(표)의 셀 여백 삭제 [border-coll(홈마스타)(1)	1053
△폼 양식 요소들의 글자 색상 지정 [font-col(홈마스타)	763
△폼 양식 요소안의 글자 정렬 지정 [text-ali(홈마스타)	800
△폼 양식 요소들의 글자 크기 지정 [font-siz(홈마스타)	724
△아이프레임의 배경을 투명처리하기[allowTrans(홈마스타)	939
△iframe의 배경을 투명하게 하는법(홈마스타)	739
△ [RE] iframe의 배경을 투명하게 하는법(홈마스타)	716
△레이어의 현재 마우스 위치(홈마스타)	749
△레이어 감추기와 보이기 다른 예제(홈마스타)	733
△레이어 감추기와 보이기 - select박스 보이기와(홈마스타)	834
△ [RE] 레이어 감추기와 보이기 - select박스(홈마스타)	1011
△ [RE] 레이어 감추기와 보이기 - select박(홈마스타)	802
△ [RE] 레이어 사용시 Select객체에 가려지는 (홈마스타)	783
△body 태그 예제(홈마스타)	649

[1] [2] ≫

복수단어 검색은 공백(space)로 구분해 주세요. 1

최근 글 △[손님]
△ php 한글 영어 일어 한자 구분 방법
△body에 background-image 여러개 적용하기
△미완성 한글 - 자음 또는 모음만으로 된 한글 체크
△수평 스크롤 금지
△mySQL 내가 원하는 자료가 어느번째에 있는지 확인하는법
△MySQL 검색된 데이터들 중 특정 데이터가 몇번째 위치하는지
△XtraBackup을 이용한 MySQL 백업 및 복구
△한글을 글자단위로 분리 - 문자열 분리
△웹 사이트 속도 개선 방법
△MariaDB 설정 파일 my.cnf
△centOS7 hostname 바꾸기 (hostnamectl)
△centOS7 SSD, HDD 읽기 쓰기 속도 테스트
△필드의 조건에 따른 순차정리
△중복자료 검사 sql 구분
△중복 글등록을 방지하는 간단한 팁

인기 글 △[손님]
△넷기어 R6220 공유기의 사설 내부 ip 고정하기
△팟플레이어 설치 파일의 작동이 중지되었습니다 - 오류 해결 방법
△[홈마스타] input type=\file\ 의 value값 초기화 시키기
△[홈마스타] 실습-테이블구조변경
△중복 글등록을 방지하는 간단한 팁
△(2) 외국 면허를 한국면허로 갱신하려면?
△(1) 키움증권 영웅문 챠트의 보조지표 세로로 넣기
△키움증권 HTS 알림서비스
△사진 해상도 낮추는법
△희귀 특수문자 모음
△[홈마스타] 제1장 글로벌 경영이란 무엇인가?
△날씨도 아무때나 확인가능한 일기예보 - 파이어폭스 확장기능 Forecastfox
△마우스 우클릭, 복사방지 해제 프로그램 - spell 2.7
△(1) 2종 소형면허 취득시 - 면제과목
△마우스의 마술사 All-in-One Gestures - 파이어폭스 확장기능