본문 바로가기

HTML/JS/CSS

[javascript] innerHTML 을 이용한 테이블 row 추가, 삭제.

SG07 2008. 6. 24. 16:38

   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 를 가진 테이블 하나가 있으면 됩니다.

'HTML/JS/CSS' 카테고리의 다른 글

HTML/Javasciprt 표준 (중요해용) (0)	2008.09.22
[Tip] select option 에 다수의 value 값을 넘긴 것과 같은 효과 내기. (0)	2008.06.04
[HTML] input text 박스 읽기 전용, 테두리 없이. (0)	2008.05.30

티스토리툴바