728x90
반응형
안녕하세요, 이번 포스팅에서는 table의 rowIndex를 활용하여 동적으로 테이블을 생성하고, 삭제하는 기능을 구현해보려고 합니다.
rowIndex는 tr 태그에서 유효합니다.
tr 태그가 동적으로 생성되기 때문에 생성되는 스크립트에서 tr태그에 이벤트를 걸어주고, 해당 tr 자체를 파라미터로 넘겨 줄 수 있도록 호출하는 함수의 파라미터로 this를 넣어줍니다.
먼저 오늘의 핵심코드입니다.
<script>
window.onload = function() {
document.getElementById("btn_add").onclick = function() {
addTableRow();
}
document.getElementById("btn_sub").onclick = function() {
delTableRow(0);
}
}
var trIdx = 0;
function addTableRow() {
var table = document.getElementById("t1").childNodes.length -1;
var tr = '<tr onmouseover="getRowIdx(this)" > <td>제목</td><td><input type=text name=title value="' + table + '" /><td/>'
+'<td><input type=button name="delete" value="제거" onclick="delTableRow(1)" /></td> </tr>';
document.getElementById("t1").innerHTML += tr;
}
function getRowIdx(tr) {
trIdx = tr.rowIndex;
}
function delTableRow(param) {
var table = document.getElementById("t1");
if(param == 1) {
table.removeChild(table.childNodes[trIdx]);
} else {
table.removeChild(table.childNodes[table.childNodes.length-1]);
}
}
</script>
다음은 동적으로 테이블을 생성할 바디를 만들어줍니다.
<body>
<table id="t1"></table>
<input type="button" onclick="addTableRow()" value="행추가"/>
<input type="button" onclick="delTableRow(0)" value="행제거"/>
</body>
이제 버튼을 클릭해봅시다.
728x90
반응형
'javascript, jQuery > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 자주 쓰는 이스케이프(escape) 문자 활용 (0) | 2020.11.29 |
|---|---|
| 자바스크립트 정규표현식을 이용하여 숫자만(numberOnly) 함수 만들기 (2) | 2020.11.17 |
댓글