JavaScript

[JavaScript] input 라인 추가 삭제 테스트

Sort 2010. 6. 11. 10:39


<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
<!--//
var input_cnt = 1;

//라인추가
function addLine() {
 /*
  display = none 한 input이 있으면 새로 생성하지 않고 다시 보여준다.
  없으면 새로 생성 
 */
 var input_add = document.getElementById("input"+(input_cnt+1));
 if(input_add != null && input_add.style.display == "none") {
  input_add.style.display = "";
  input_cnt++;
 }else {
  input_cnt++;
  var tab_td, tab_tr;
  
  tab_tr = document.getElementById("table1").insertRow();  //tr생성  eq window.table1.insertRow();
  tab_tr.id = "tr" + input_cnt; //tr의 id설정 
  tab_tr.bgColor = "white";
  tab_td = tab_tr.insertCell();
  tab_td.className = "" //css 적용
  tab_td.innerHTML = "<input type='text' id='input" + input_cnt + "'>";
 }
 
}

//라인삭제
function deleteLine() {
 if(input_cnt > 1) {
  var input_d = document.getElementById("input" + input_cnt); 
     input_d.style.display = "none"; 
  input_cnt--;
 }
}

//-->
</script>
<title>Test Table</title>
</head>
<body>
<table id="table1">
<tr>
 <td>
  <input type="text" id="input1">
 </td>
</tr>
</table>
 <input type="button" id="addInput" value="라인추가" onClick="addLine();"> 
 <input type="button" id="delInput" value="라인삭제" onClick="deleteLine();">
</body>
</html>