웹모아
웹모아[손님] 검색   로그인    


 
폼태그(입력)
 


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


<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박스에 텍스트 벨류를요 카페에서 메뉴를 587
     iframe 에서 text field 값 얻어 오기709
     select 상자 그룹 예제612
      숫자만, 영문만, 한글만 입력하고 싶을 때987
     INPUT : 숫자만 입력하기695
     입력박스에 특수문자 입력못하게 하려면649
     row 추가 2663
       [RE] row 추가 2 - 테이블이름 지정667
         [RE] row 추가 2 - 테이블이름 지정-삭제586
     추가, 삭제 누르면서 테이블 행추가, 삭제하기 스크613
     row 추가672
  테이불 추가 스크립트761
     입력박스에 안내메세지 넣기(홈마스타)772
     동적으로 객체를 변경하는 자바스크립트(홈마스타)684
     자바스크립트를 써서 폼구문안에 전송(submit)하(홈마스타)587
       [RE] 자바스크립트를 써서 폼구문안에 전송(sub(홈마스타)580
     테이블(표)의 셀 여백 삭제 [border-coll(홈마스타)(1) 824
     폼 양식 요소들의 글자 색상 지정 [font-col(홈마스타)634
     폼 양식 요소안의 글자 정렬 지정 [text-ali(홈마스타)657
     폼 양식 요소들의 글자 크기 지정 [font-siz(홈마스타)587
     아이프레임의 배경을 투명처리하기[allowTrans(홈마스타)718
     iframe의 배경을 투명하게 하는법(홈마스타)602
       [RE] iframe의 배경을 투명하게 하는법(홈마스타)543
     레이어의 현재 마우스 위치(홈마스타)606
     레이어 감추기와 보이기 다른 예제(홈마스타)596
     레이어 감추기와 보이기 - select박스 보이기와(홈마스타)629
       [RE] 레이어 감추기와 보이기 - select박스(홈마스타)852
         [RE] 레이어 감추기와 보이기 - select박(홈마스타)634
       [RE] 레이어 사용시 Select객체에 가려지는 (홈마스타)594
     body 태그 예제(홈마스타)470
≪ [1]  [2]   ≫

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



 
최근 글
[손님]
85
77
233
377
621
374
416
241
361
3809
914
954
1200
974
4266
 
인기 글
[손님]
3374
4274
4047
  [랜드모아] 영문과 숫자만 사용
3101
3236
3087
3213
8005
3083
3062
  [홈마스타] 한글 유니코드 표
3353
5773
4035
3168
5099