웹모아
웹모아[손님] 검색 로그인   
웹모아
 
폼태그(입력)
 


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


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


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

 

  row 추가
row추가.. .button_ex { font-family:돋움; font-size:11px; letter-spacing:-1px; color: #CED5E0; background-color: #565869; cursor: hand; border-color: #BABABA #B6B6B6 #B6B6B6 #BABABA; padd조회(668)          




  테이불 추가 스크립트
var fNum = 1; //인덱스로 찾지 않아도 되므로 소스가 복잡하지 않음. function getObj() { var obj = event.srcElement while (obj.tagName !='TD') //TD가 나올때까지의 Object추출 { 조회(754)          




  입력박스에 안내메세지 넣기
function clearField(field){ if (field.value == field.defaultValue) { field.value = ""; } } function checkField(field){ if (field.value == "") { field.value = field.defaultVal(홈마스타)     조회(769)          




  동적으로 객체를 변경하는 자바스크립트
var layoutContent = new Array(); layoutContent[1] = "Image 1.등록하신 이미지는 가로 넓이 474 px로 조정되어 보여지며,세로 크기의 pixel 제한은 없습니다.(용량은 1M까지 등록 할 수 있습니다.)"; layoutContent[2] = "Image 2.가로 넓이 235px로 조정되어 보여지며,세로(홈마스타)     조회(678)          




  자바스크립트를 써서 폼구문안에 전송(submit)하
(홈마스타)     조회(582)          




    [RE] 자바스크립트를 써서 폼구문안에 전송(sub
덧셈 뺄셈 (홈마스타)     조회(574)          




  테이블(표)의 셀 여백 삭제 [border-coll
아래는 border-collapse:collapse 를 적용하여 셀사이 여백이 없어서 테두리가 가늘게 나타납니다. 셀사이에 여백이 없어져서 테두리가 가늡니다. 아래는 border-collapse:separate 를 적용하여 셀사이 여백이 있어서 테두리가 두껍게 나타납니다. 셀사이에 여백이 있어서 테두리(홈마스타)     댓글 (1)     조회(818)          




  폼 양식 요소들의 글자 색상 지정 [font-col
아래와 같이 STYLE="color:색상코드" 로 폼양식 요소에 문자색상을 지정 <INPUT TYPE="text" STYLE="color:red">의 경우 아래와 같이 나타남 글자를 입력하여 보세요.위의 text 대신 password(암호입력란),file 도 지정가능  <INPUT TYPE="butt(홈마스타)     조회(628)          




  폼 양식 요소안의 글자 정렬 지정 [text-ali
아래와 같이 STYLE="text-align:left 또는 center 또는 right" 로 폼양식 요소안에 문자정렬 <INPUT TYPE="text" STYLE="text-align:right">의 경우 아래와 같이 나타남 글자를 입력하여 보세요.위의 text 대신 password(암호입력란),file 도 지정가능&nbs(홈마스타)     조회(648)          




  폼 양식 요소들의 글자 크기 지정 [font-siz
아래와 같이 STYLE="font-size:문자 크기px" 로 폼양식 요소에 문자크기를 지정 <INPUT TYPE="text" STYLE="font-size:15px">의 경우 아래와 같이 나타남 글자를 입력하여 보세요.<INPUT TYPE="text" STYLE="font-size:7px">의 경우 아래와 같이(홈마스타)     조회(580)          




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

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




최근 글
[손님]


인기 글
[손님]