혹시 아래의 예제가 제대로 실행 되지 않는다면 브라우져의 호환성 보기를 눌러 해보라 그럼 된다!!~
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
// <![CDATA[
function ckbAll_onclick() {
var ckbs = document.getElementsByName("ckbSelect");
for (var i = 0; i < ckbs.length; i++)
ckbs[i].checked = ckbAll.checked;
}
function btnDelete_onclick() {
var ckbs = document.getElementsByName("ckbSelect");
for (var i = 0; i < ckbs.length; i++) {
if (ckbs[i].checked) {
alert(i + '번 삭제');
tblMember.deleteRow(i + 1);
i--;
}
}
}
function btnAdd_onclick() {
//자바스크립트로 동적 추가
var cp = tblMember.createCaption();
cp.innerHTML = "사원 정보";
//새로운 행 추가
var nr = tblMember.insertRow(-1);
var td1 = nr.insertCell(0);//체크박스 넣기
var td2 = nr.insertCell(1);//텍스트박스 넣기
var td3 = nr.insertCell(2); //텍스트박스 넣기
var ckb = document.createElement("input");
ckb.type = "checkbox";
ckb.name = "ckbSelect";
td1.appendChild(ckb);
td2.appendChild(document.createTextNode("XXX"));
td3.appendChild(document.createTextNode("YYY"));
}
// ]]>
</script>
</head> |
** 체크박스에 선택된 행을 지우는 함수이다. 아래 처럼 i--를 해줘야 제대로 삭제가 이루어진다.
테이블의 행을 하나 추가시키는 구문이다.
추가시킨 행에 필요한 셀(td)가 3개이므로 3개를 많들어 주고 주속에 달린 개체들을 넣어줄 것이다.
document.createTextNode()이용하여 텍스트 개체를 만들어 각각의 셀에 값을 넣어 준다. |
|
<body>
<h3>동적 테이블 Row 추가하기.</h3>
<table id="tblMember" border="1" width="300">
<tr>
<td><input type="checkbox" id="ckbAll" name="ckbAll" onclick="return ckbAll_onclick()" /></td>
<td>부서</td>
<td>이름</td>
</tr>
<tr>
<td><input type="checkbox" id="Checkbox1" name="ckbSelect" /></td>
<td>생산부</td>
<td>홍길동01</td>
</tr>
<tr>
<td><input type="checkbox" id="Checkbox2" name="ckbSelect" /></td>
<td>생산부</td>
<td>홍길동02</td>
</tr>
<tr>
<td><input type="checkbox" id="Checkbox3" name="ckbSelect" /></td>
<td>생산부</td>
<td>홍길동03</td>
</tr>
</table>
<table id="tblAdd" border="1" width="300">
<tr>
<td align="center">
<input type="button" id="btnAdd" name="btnAdd" value="사원추가" onclick="return btnAdd_onclick()" />
<input type="button" id="btnDelete" name="btnDelete" value="사원삭제" onclick="return btnDelete_onclick()" />
</td>
</tr>
</table>
</body>
</html>
|
테이블의 기본 틀이다.
|