table 가지고 놀기 insertrow deleterow

javascript

table 가지고 놀기 insertrow deleterow

새로운 도전을 위한 한걸음 2015. 5. 10. 21:55

<html>
<head>
<title>AddRow, DelRow, CopyRow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="util.js"></script>
<script language="javascript">
<!--
function insRow() {
var objTable = document.getElementById("mainTbl");
var objTBody = document.createElement("TBODY");
objTable.appendChild(objTBody);
var lastRow = objTable.rows.length;
var objRow1 = objTable.insertRow(lastRow);
var objRow2 = objTable.insertRow(lastRow + 1);

var objCell1 = objRow1.insertCell();
var objCell2 = objRow1.insertCell();
var objCell3 = objRow1.insertCell();
var objCell4 = objRow1.insertCell();
var objCell5 = objRow1.insertCell();

var objCell6 = objRow2.insertCell();
var objCell7 = objRow2.insertCell();
var objCell8 = objRow2.insertCell();
var objCell9 = objRow2.insertCell();

objCell1.innerHTML = "<input type='checkbox' id='chk'>";
objCell1.rowSpan = 2;
objCell2.innerHTML = "<input type='text' id='input1' width='10px'>";
objCell3.innerHTML = "<input type='text' id='input2' width='10px'>";
objCell4.innerHTML = "<input type='text' id='input3' width='10px'>";
objCell5.innerHTML = "<input type='text' id='input4' width='10px'>";
objCell6.innerHTML = "<input type='text' id='input5' width='10px'>";
objCell7.innerHTML = "<input type='text' id='input6' width='10px'>";
objCell8.innerHTML = "<input type='text' id='input7' width='10px'>";
objCell9.innerHTML = "<input type='text' id='input8' width='10px'>";
}

// delete Row
function delRow() {
var objTable = document.getElementById("mainTbl");
var objTBody = objTable.getElementsByTagName("TBODY");
var lastRow = objTBody.length - 1;

function cpyRow() {
var objTable = document.getElementById("mainTbl");
var objTBody = objTable.getElementsByTagName("TBODY");
var lastRow = objTBody.length - 1;

allUnCheck();
}
}

function chkData() {
var objTable = document.getElementById("mainTbl");
var objTBody = objTable.getElementsByTagName("TBODY");
var lastRow = objTBody.length - 1;

for(var i = lastRow; i > 0; i--) {
if(objTBody[i].getElementsByTagName("TR")[0].cells[0].firstChild.checked) {
var tBodyRow = objTBody[i].getElementsByTagName("TR").length;

for(var j = 0; j < tBodyRow; j++) {
var colCnt = objTBody[i].getElementsByTagName("TR")[j].cells.length;

                for(var k = 0; k < colCnt; k++) {
                    var oTagName = objTBody[i].getElementsByTagName("TR")[j].cells[j].firstChild.tagName.toUpperCase();
                    switch (oTagName) {
                        case "INPUT" :
                            alert("input");
                            break;

                    }
                }
            }
  }
}
}

/**
* CheckBox Tag Object return Checked Count
*/
function checkCount() {
var objTable = document.getElementById("mainTbl");
var objTBody = objTable.getElementsByTagName("TBODY");
var lastRow = objTBody.length - 1;
var rtnCnt = 0;

for(var i = lastRow; i > 0; i--) {
if(objTBody[i].getElementsByTagName("TR")[0].cells[0].firstChild.checked) rtnCnt++;
}

return rtnCnt;
}

/**
* CheckBox Tag Object return Checked Count
*/
function allCheck() {
var objTable = document.getElementById("mainTbl");
var objTBody = objTable.getElementsByTagName("TBODY");
var lastRow = objTBody.length - 1;
var rtnCnt = 0;

for(var i = lastRow; i > 0; i--) {
objTBody[i].getElementsByTagName("TR")[0].cells[0].firstChild.checked = true;
}
}

/**
* CheckBox Tag Object return Checked Count
*/
function allUnCheck() {
var objTable = document.getElementById("mainTbl");
var objTBody = objTable.getElementsByTagName("TBODY");
var lastRow = objTBody.length - 1;
var rtnCnt = 0;

for(var i = lastRow; i > 0; i--) {
objTBody[i].getElementsByTagName("TR")[0].cells[0].firstChild.checked = false;
}
}

function checkExcute(obj) {
if(obj.checked) allCheck();
else allUnCheck();
}

/**
* The Tag Object search Parent Elements Node from Current Element
*
* @param tagName Searching Tag Name
* @param srcElement Current Element Object
* @return Searched Node Object
*/
window.searchUpByTagName = function(tagName, srcElement) {
if(srcElement == null) srcElement = window.event.srcElement;
if(tagName == null) return null;

tagName = tagName.toUpperCase();
var element = srcElement.parentElement;

while(element != null) {
if(element.tagName == tagName) return element;

element = element.parentElement;
}
}

//-->
</script>
</head>

[출처] [Javascript] HTML에서 InsertRow, DeleteRow, CopyRow 구현 예문 (헤르메스의 날개) |작성자 헤르메스