웹모아
웹모아[가입] 로그인 / 회원가입   검색     


  
폼태그(입력)
  

▽테이불 추가 스크립트
2007-09-04 20:48:11 댓글:(0)   조회:2722
 

<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>
. 

[이전글] ▽ row 추가
[다음글] ▽ 입력박스에 안내메세지 넣기


 
※ 댓글쓰기는 회원(로그인 하신분) 이상 가능합니다.


 댓글 (0)

  
폼태그(입력)
 페이지: 1 / 5   

▽ select박스에 텍스트 벨류를요 카페에서 메뉴를 수정하듯이
열람:2690   2009.01.06 		
▽ iframe 에서 text field 값 얻어 오기
열람:3573   2008.08.07 		
▽ select 상자 그룹 예제
열람:3191   2008.04.23 		
▽   숫자만, 영문만, 한글만 입력하고 싶을 때
열람:2840   2008.02.22 		
▽ INPUT : 숫자만 입력하기
열람:3253   2008.02.21 		
▽ 입력박스에 특수문자 입력못하게 하려면
열람:2357   2007.11.01 		
▽ row 추가 2
열람:2458   2007.09.04 		
▽   [RE] row 추가 2 - 테이블이름 지정
열람:3347   2007.09.05 		
▽     [RE] row 추가 2 - 테이블이름 지정-삭제기능 추가
열람:2173   2007.09.05 		
▽ 추가, 삭제 누르면서 테이블 행추가, 삭제하기 스크립트
열람:2996   2007.09.04 		

[1]  [2]  [3]  [4]  [5]   ≫

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




 
최근 글 ▽[손님]
 
인기 글 ▽[손님]
▽[밝곰] 출첵입니다