웹모아 
웹모아  로그인  회원가입   
웹모아
 
폼태그(입력)
 


  테이불 추가 스크립트
  등록: 2007-09-04 20:48:11 조회:679


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




 

 





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

   select박스에 텍스트 벨류를요 카페에서 메뉴를 507
   iframe 에서 text field 값 얻어 오기627
   select 상자 그룹 예제532
    숫자만, 영문만, 한글만 입력하고 싶을 때895
   INPUT : 숫자만 입력하기594
   입력박스에 특수문자 입력못하게 하려면565
   row 추가 2585
     [RE] row 추가 2 - 테이블이름 지정580
       [RE] row 추가 2 - 테이블이름 지정-삭제511
   추가, 삭제 누르면서 테이블 행추가, 삭제하기 스크543
   row 추가606
테이불 추가 스크립트680
   입력박스에 안내메세지 넣기(홈마스타)691
   동적으로 객체를 변경하는 자바스크립트(홈마스타)604
   자바스크립트를 써서 폼구문안에 전송(submit)하(홈마스타)518
     [RE] 자바스크립트를 써서 폼구문안에 전송(sub(홈마스타)518
   테이블(표)의 셀 여백 삭제 [border-coll(홈마스타)(1) 739
   폼 양식 요소들의 글자 색상 지정 [font-col(홈마스타)554
   폼 양식 요소안의 글자 정렬 지정 [text-ali(홈마스타)585
   폼 양식 요소들의 글자 크기 지정 [font-siz(홈마스타)532
   아이프레임의 배경을 투명처리하기[allowTrans(홈마스타)634
   iframe의 배경을 투명하게 하는법(홈마스타)538
     [RE] iframe의 배경을 투명하게 하는법(홈마스타)480
   레이어의 현재 마우스 위치(홈마스타)522
   레이어 감추기와 보이기 다른 예제(홈마스타)523
   레이어 감추기와 보이기 - select박스 보이기와(홈마스타)553
     [RE] 레이어 감추기와 보이기 - select박스(홈마스타)761
       [RE] 레이어 감추기와 보이기 - select박(홈마스타)578
     [RE] 레이어 사용시 Select객체에 가려지는 (홈마스타)508
   body 태그 예제(홈마스타)404
≪ [1]  [2]   ≫

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



 
인기 글
9775
6199
20188
6491
4155
4808
4797
4120
3803
3860
3941
3958
3959
5744
4245
 
최근 글
94
137
138
104
86
102
2887
741
712
901
793
3959
3343
3381
3767