테이블 행/열 추가하는 자바스크립트
페이지 정보
작성자
오원장
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 4,596회
작성일 12-02-27 01:38
본문
<html>
<head>
<title>테이블에 동적으로 열추가/열삭제</title>
<style>
table td input, td select {
border: 1px solid #CFD3DB;
font-family: dotum,"돋움";
font-size: 12px;
width: 100%;
}
table {
border-collapse: collapse;
empty-cells: show;
border-top: 2px solid #4BA3E7;
width: 100%;
}
table td {
border-bottom: 1px solid #E5E5E5;
color: #747D90;
padding: 6px 0 5px 10px;
text-align: left;
vertical-align: middle;
}
table td.header {
background: none repeat scroll 0 0 #EEF3FA;
border-bottom: 1px solid #E5E5E5;
color: #414552;
font-weight: bold;
padding: 6px 0 5px 10px;
text-align: left;
vertical-align: middle;
}
a.btn {
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #7F8693;
display: inline-block;
font-family: Dotum;
font-size: 11px;
height: 14px;
padding: 2px 7px;
text-decoration: none;
vertical-align: middle;
}
a.btn:hover {
text-decoration: none;
}
</style>
<script>
var TableLibrary = {
tableRowLimit : 10, // 행추가 제한
tableRowNum : 1, // 행을 추가할 기준
tableRowIndex : 0, // 행을 구분하기 위해
addRow : function(){
if(TableLibrary.tableRowIndex < TableLibrary.tableRowLimit-1){
var mytable = document.getElementById("mytable"); // 사용하는 프레임웍에 따라 변경가능
var newRow = mytable.insertRow(TableLibrary.tableRowNum);
TableLibrary.tableRowNum++;
TableLibrary.tableRowIndex++;
newRow.id = "myTableTr_" + TableLibrary.tableRowIndex;
var snsCell1 = newRow.insertCell(0);
snsCell1.innerHTML = "<a href='#' onclick='TableLibrary.delRow(\"myTableTr_" + TableLibrary.tableRowIndex + "\"); return false;' class='btn'>-</a>";
var snsCell2 = newRow.insertCell(0);
snsCell2.innerHTML = "<input type='text' id='myData_" + TableLibrary.tableRowIndex + "' name='myData'>"; // 데이터이름
var snsCell3 = newRow.insertCell(0)
snsCell3.className = "header";
snsCell3.innerHTML = "제목";
} else {
alert("최대 "+TableLibrary.tableRowLimit+"개까지 입력할 수 있습니다.");
return;
}
},
delRow : function(obj){
TableLibrary.tableRowNum--;
TableLibrary.tableRowIndex--;
if(obj!="" && obj!=null){
document.getElementById(obj).parentNode.removeChild(document.getElementById(obj));
}
}
}
</script>
</head>
<body>
<table cellpadding="0" border="0" id="mytable">
<colgroup>
<col width="80px">
<col width="">
<col width="20px">
</colgroup>
<tr>
<td class="header">제목</td>
<td><input type="text" name="myData" id="myData_0"></td>
<td><a class="btn" onclick="TableLibrary.addRow(); return false;" href="#">+</a></td>
</tr>
</table>
</body>
</html>댓글목록
등록된 댓글이 없습니다.