티스토리 뷰
원본 : http://blog.daum.net/queenyjina/7553403
개인적인 공부 목적으로 메모 합니다.
================================
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
/*JAVASCRIPT전역변수*********************************************************/
var oRowFlag = true; //제목Row 생성제한을 위한 flag
/*****************************************************************************/
<!--------------------------------------------------------------------------->
<!-- 추가버튼 : 소재추가 ------------------------------------------------------>
<!-- 입력값의 내용을 DB추가 없이 화면에 추가로 표현한다. (DB저장과는 무관) -->
<!--------------------------------------------------------------------------->
function addRow(data0, data1, data2){
var oRow0, oRow1;
/*addTbl이란 실제 추가된 Row가 표현될 table의 id이며 이를 타겟으로 로우와 innerHTML을
해당 table에 적용한다.*/
var totalRow = addTbl.rows.length; //전체Row
var selRow = addTbl.clickedRowIndex; //선택한Row의 index
var column0 = data0.value; //1번째입력데이터
var column1 = data1.value; //2번째입력데이터
var column2 = data2.value; //3번째입력데이터
/*제목부분은 처음에 단 한번만 생성되고 이후에는 데이터만 추가되는 형식을 위하여
oRow에 Flag을 부여하여 true일때만 생성하고 이후에는 false를 지정-생성하지 않는다.*/
if(oRowFlag){
oRow0 = addTbl.insertRow(); //제목Row의 추가(insert)생성. TR생성과 같다.
/*삭제시 삭제버튼이 있는 현재로우, 즉 삭제버튼을 클릭한Row의 Index를 반환한다.
이 Index로 끝단이 아닌 중간부분의 Row도 삭제가 가능하다.*/
oRow0.onmouseover=function(){addTbl.clickedRowIndex=this.rowIndex};
/*Row에 Cell을 추가(insert)한다. TR에 TD를 생성하는것과 같다.*/
var oCell0 = oRow0.insertCell(); //TD1의 생성
var oCell1 = oRow0.insertCell(); //TD2의 생성
var oCell2 = oRow0.insertCell(); //TD3의 생성
var oCell3 = oRow0.insertCell(); //TD4의 생성
/*setAttribute를 이용하여 TR과 TD의 넓이와 속성을 제어하듯, 속성효과를 줄수있다.*/
oCell0.setAttribute("width","100"); //TD1의 WIDTH설정
oCell0.setAttribute("align","center"); //TD1의 ALIGN설정
oCell1.setAttribute("width","100"); //TD2의 WIDTH설정
oCell1.setAttribute("align","center"); //TD2의 ALIGN설정
oCell2.setAttribute("width","100"); //TD3의 WIDTH설정
oCell2.setAttribute("align","center"); //TD3의 ALIGN설정
oCell3.setAttribute("width","100"); //TD4의 WIDTH설정
oCell3.setAttribute("align","center"); //TD4의 ALIGN설정
/*제목Row에 각 항목의 제목을 innerHTML을 이용하여 설정하고, 제목로우는 단한번만 생성
하기위해 1회 실행후 oRowFlag를 false로 설정한다.*/
oCell0.innerHTML = "DATA1";
oCell1.innerHTML = "DATA2"
oCell2.innerHTML = "DATA3"
oCell3.innerHTML = "삭제"
oRowFlag = false;
}
/*제목영역과 동일한 작업으로 데이터 영역을 생성한다.*/
oRow1 = addTbl.insertRow(); //데이터Row
oRow1.onmouseover=function(){addTbl.clickedRowIndex=this.rowIndex};
var oCell5 = oRow1.insertCell();
var oCell6 = oRow1.insertCell();
var oCell7 = oRow1.insertCell();
var oCell8 = oRow1.insertCell();
oCell5.setAttribute("width","100"); //TD5의 WIDTH설정
oCell5.setAttribute("align","center"); //TD5의 ALIGN설정
oCell6.setAttribute("width","100"); //TD6의 WIDTH설정
oCell6.setAttribute("align","center"); //TD6의 ALIGN설정
oCell7.setAttribute("width","100"); //TD7의 WIDTH설정
oCell7.setAttribute("align","center"); //TD7의 ALIGN설정
oCell8.setAttribute("width","100"); //TD8의 WIDTH설정
oCell8.setAttribute("align","center"); //TD8의 ALIGN설정
/*데이터가 들어갈 부분에는 미리 [+추가]버튼 클릭이벤트시 받아온 parameter를 넣는다.*/
oCell5.innerHTML = column0; //DATA1
oCell6.innerHTML = column1; //DATA2
oCell7.innerHTML = column2; //DATA3
oCell8.innerHTML = "<input type='button' value='-삭제' onClick='delRow()'>"; //삭제버튼
//추가구성후 field초기화
document.mainfrm.data1.value = "";
document.mainfrm.data2.value = "";
document.mainfrm.data3.value = "";
}
<!----------------------------------------------------------->
<!-- 삭제버튼 : Row삭제 ------------------------------------->
<!-- 추가된 소재중 선택한 한개의 Row의 소재정보를 삭제한다 -->
<!----------------------------------------------------------->
function delRow(){
var totalRow = addTbl.rows.length; //전체Row
var selRow = addTbl.clickedRowIndex; //선택한Row의 index
//Parameter Test Alert!--------------------
//alert!("totalRow : " + totalRow);
//alert!("selRow : " + selRow);
//---------------------------------------
/*deleteRow를 이용하여 선택된 index의 Row를 삭제하며 한줄일때는 제목행까지 삭제한후
재추가의 경우 제목Row가 다시 출력되어야 하므로 oRowFlag를 true로 설정한다.*/
addTbl.deleteRow(addTbl.clickedRowIndex); //선택한 indexRow삭제
if(totalRow == 2 && selRow ==1){ //전체Row=2, 선택된Row=1 추가된 항목이 한개일때
addTbl.deleteRow(addTbl.RowIndex); //선택한 indexRow및 전체 Row삭제
oRowFlag = true; //재추가를 위한 flag초기화
}
}
</script>
</head>
<body>
<form name="mainfrm">
<table width="400">
<!--DATA1 field-->
<tr>
<td width="150" align="center" bgcolor="#F5F5F5">DATA1</td>
<td>
<input type="text" name="data1" style="width:235px">
</td>
</tr>
<!--DATA2 field-->
<tr>
<td width="150" align="center" bgcolor="#F5F5F5">DATA2</td>
<td>
<input type="text" name="data2" style="width:235px">
</td>
</tr>
<!--DATA3 field-->
<tr>
<td width="150" align="center" bgcolor="#F5F5F5">DATA3</td>
<td>
<input type="text" name="data3" style="width:235px">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="+추가" onClick="addRow(data1, data2, data3)">
</td>
</tr>
</table>
<!--추가된 로우가 들어갈 테이블 id="addTbl"-->
<table id="addTbl" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
</table>
</form>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 쿠키 이용하여 로그인 아이디 저장하기 (0) | 2018.03.22 |
|---|---|
| input text 값 비교 (0) | 2018.02.23 |
| 체크박스 특정 박스 선택만 남고 모두 해제 (0) | 2018.02.21 |
| 숫자만 입력 받기(키패드 도트(.) 도 방지 됨) (0) | 2018.01.09 |
| 자바스크립트로 변수 넘기기 (0) | 2014.08.13 |