function btn_add_onClick() // Row 추가 function
{
tableID = document.all.tb_title; // 테이블 ID
var rowNum = tableID.rows.length;
var tableCell = 7; // 테이블 셀 개수. (<td></td> 의 개수라고 보면됨)
var newRowNum = tableID.insertRow(rowNum);
for(var j=0; j < tableCell ; j++)
{
newRowNum.insertCell(j);
}
newRowNum.className = "table_content"; // sytle.css 에 정의되어있는..
newRowNum.align = "center";
//newRowNum.style.background = "#F0F0F0";
newRowNum.height = "24";
newRowNum.cells[0].innerHTML = "<input type='checkbox' name='chkbox'>";
newRowNum.cells[1].innerHTML
= "<input type='text' value='正規Card' readonly style='border:0'
onclick='btn_int_onClick ("+rowNum+");' style='cursor:hand' size='5'>";
newRowNum.cells[2].innerHTML = "<input type='text' name='emp_nm_"+rowNum+"'
value='' readonly style='border:0' size='6' >"+
"<input type='hidden' name='emp_no_"+rowNum+"' value='' readonly >"+
"<input type='hidden' name='tel_no_"+rowNum+"' value='' readonly >";
newRowNum.cells[3].innerHTML
= "<input type='text' name='dpt_nm_"+rowNum+"' value='' readonly style='border:0'
size='15' >"+
"<input type='hidden' name='dpt_cd_"+rowNum+"' value='' readonly >";
newRowNum.cells[4].innerHTML
= "<input type='text' name='rank_nm_"+rowNum+"' value='' readonly style='border:0'
size='5' >"+
"<input type='hidden' name='rank_cd_"+rowNum+"' value='' readonly style='border:0'
size='5' >";
newRowNum.cells[5].innerHTML
= "<input type='text' name='floor_nm_"+rowNum+"' value='' readonly style='border:0' >"+
"<input type='hidden' name='floor_cd_"+rowNum+"' value='' readonly style='border:0' >";
newRowNum.cells[6].innerHTML
= "<input type='text' name='inout_dept_nm_"+rowNum+"' value='' readonly style='border:0'
size='25' >"+
"<input type='hidden' name='inout_dept_cd_"+rowNum+"' value='' readonly >"+
"<input type='hidden' name='approve_stat_"+rowNum+"' value='N'/>"+
"<input type='hidden' name='issueReason_"+rowNum+"'value='' />"+
"<input type='hidden' name='cardIssueTyp_"+rowNum+"' value='N' />"+
"<input type='hidden' name='inouter_compnyNm_"+rowNum+"' value='' />";
// cells[] 의 배열을 TableCell 변수와 맞게 조절한다.
function btn_del_onClick() // row 삭제 function
{
var count = 0;
tableID = document.all.tb_title;
var rowNum = tableID.rows.length;
if(rowNum > 1){
if(tableID.rows[1].cells.length == 1){
alert("삭제 대상이 없습니다.");
return false;
}
}
for (var rowNum ; rowNum>1 ; rowNum--)
{
if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
{
count++;
}
}
if( count ==0 ){
alert("삭제할 항목이 없습니다.");
return;
}
if(!confirm("삭제하시겠습니까?")) return;
rowNum = tableID.rows.length;
for (var rowNum ; rowNum>1 ; rowNum--)
{
if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
{
tableID.deleteRow(rowNum-1); // 체크된 Row 를 삭제
}
}
}
---------------------------- 여기까지 javascript Function 정의 --------------------------
<html>
<head></head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="BEC8D3" id="tb_title">
<tr>
<td>..</td>..<td>..</td> ....... 생략...
</tr>
</table>
</body>
</html>
// function 에서 정의해준 table id 를 가진 테이블 하나가 있으면 됩니다.
{
tableID = document.all.tb_title; // 테이블 ID
var rowNum = tableID.rows.length;
var tableCell = 7; // 테이블 셀 개수. (<td></td> 의 개수라고 보면됨)
var newRowNum = tableID.insertRow(rowNum);
for(var j=0; j < tableCell ; j++)
{
newRowNum.insertCell(j);
}
newRowNum.className = "table_content"; // sytle.css 에 정의되어있는..
newRowNum.align = "center";
//newRowNum.style.background = "#F0F0F0";
newRowNum.height = "24";
newRowNum.cells[0].innerHTML = "<input type='checkbox' name='chkbox'>";
newRowNum.cells[1].innerHTML
= "<input type='text' value='正規Card' readonly style='border:0'
onclick='btn_int_onClick ("+rowNum+");' style='cursor:hand' size='5'>";
newRowNum.cells[2].innerHTML = "<input type='text' name='emp_nm_"+rowNum+"'
value='' readonly style='border:0' size='6' >"+
"<input type='hidden' name='emp_no_"+rowNum+"' value='' readonly >"+
"<input type='hidden' name='tel_no_"+rowNum+"' value='' readonly >";
newRowNum.cells[3].innerHTML
= "<input type='text' name='dpt_nm_"+rowNum+"' value='' readonly style='border:0'
size='15' >"+
"<input type='hidden' name='dpt_cd_"+rowNum+"' value='' readonly >";
newRowNum.cells[4].innerHTML
= "<input type='text' name='rank_nm_"+rowNum+"' value='' readonly style='border:0'
size='5' >"+
"<input type='hidden' name='rank_cd_"+rowNum+"' value='' readonly style='border:0'
size='5' >";
newRowNum.cells[5].innerHTML
= "<input type='text' name='floor_nm_"+rowNum+"' value='' readonly style='border:0' >"+
"<input type='hidden' name='floor_cd_"+rowNum+"' value='' readonly style='border:0' >";
newRowNum.cells[6].innerHTML
= "<input type='text' name='inout_dept_nm_"+rowNum+"' value='' readonly style='border:0'
size='25' >"+
"<input type='hidden' name='inout_dept_cd_"+rowNum+"' value='' readonly >"+
"<input type='hidden' name='approve_stat_"+rowNum+"' value='N'/>"+
"<input type='hidden' name='issueReason_"+rowNum+"'value='' />"+
"<input type='hidden' name='cardIssueTyp_"+rowNum+"' value='N' />"+
"<input type='hidden' name='inouter_compnyNm_"+rowNum+"' value='' />";
// cells[] 의 배열을 TableCell 변수와 맞게 조절한다.
function btn_del_onClick() // row 삭제 function
{
var count = 0;
tableID = document.all.tb_title;
var rowNum = tableID.rows.length;
if(rowNum > 1){
if(tableID.rows[1].cells.length == 1){
alert("삭제 대상이 없습니다.");
return false;
}
}
for (var rowNum ; rowNum>1 ; rowNum--)
{
if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
{
count++;
}
}
if( count ==0 ){
alert("삭제할 항목이 없습니다.");
return;
}
if(!confirm("삭제하시겠습니까?")) return;
rowNum = tableID.rows.length;
for (var rowNum ; rowNum>1 ; rowNum--)
{
if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
{
tableID.deleteRow(rowNum-1); // 체크된 Row 를 삭제
}
}
}
---------------------------- 여기까지 javascript Function 정의 --------------------------
<html>
<head></head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="BEC8D3" id="tb_title">
<tr>
<td>..</td>..<td>..</td> ....... 생략...
</tr>
</table>
</body>
</html>
// function 에서 정의해준 table id 를 가진 테이블 하나가 있으면 됩니다.
'HTML/JS/CSS' 카테고리의 다른 글
HTML/Javasciprt 표준 (중요해용) (0) | 2008.09.22 |
---|---|
[Tip] select option 에 다수의 value 값을 넘긴 것과 같은 효과 내기. (0) | 2008.06.04 |
[HTML] input text 박스 읽기 전용, 테두리 없이. (0) | 2008.05.30 |