javascript | 동적 tr 증가 및 삭제
페이지 정보
작성자 100K5 작성일12-04-01 10:03 조회65,193회 댓글0건관련링크
본문
<script type="text/javascript">
<!--
// 행 추가
function go_record_add()
{
var oRow = order_extra_list.insertRow(-1); // insertRow(0) 인 경우는 맨처음에 삽입, insertRow(-1) 인 경우는 맨마지막에 삽입, insertRow(n)인 경우는 특정 위치에 삽입
oRow.onmouseover=function(){order_extra_list.clickedRowIndex=this.rowIndex};
var oCell1 = oRow.insertCell(0); // 순번 레이블
var oCell2 = oRow.insertCell(1); // 필드1:input-text
var oCell3 = oRow.insertCell(2); // 필드2:input-text
var oCell4 = oRow.insertCell(3); // 필드3:input-text
var oCell5 = oRow.insertCell(4); // 추가 버튼:a
oCell1.height = "32";
oCell1.style.backgroundColor = "#EEEEEE"; // 자바스크립트처럼 속성에 접근해야 한다.
oCell1.align = "center";
oCell2.align = "center";
oCell3.align = "center";
oCell4.align = "center";
oCell5.align = "center";
var rowCount = jQuery("table#order_extra_list tr").length;
oCell1.innerHTML = rowCount - 1;
oCell2.innerHTML = "<input type=\"text\" name=\"uniform_number[]\" style=\"width:50px\" class=\"inputTypeText\" />";
oCell3.innerHTML = "<input type=\"text\" name=\"uniform_name[]\" style=\"width:50px\" class=\"inputTypeText\" />";
oCell4.innerHTML = "<input type=\"text\" name=\"height[]\" style=\"width:50px\" class=\"inputTypeText\" />";
oCell5.innerHTML = "<span class=\"button\"><a href=\"javascript:void go_record_del()\">삭제</a></span>";
}
// 행 삭제
function go_record_del()
{
order_extra_list.deleteRow(order_extra_list.clickedRowIndex);
}
// 모든 행 삭제
function go_record_alldel()
{
// 매번 출력시 전체행을 삭제한다. 전체행의 삭제시 행번호 1번만 전체 행의 개수-1 만큼 반복 삭제한다.
var rowCount = jQuery("table#order_extra_list tr").length;
if (rowCount > 1) {
for (i = 1; i <= rowCount - 1; i++)
order_extra_list.deleteRow(1);
}
}
//-->
</script>
<!--
// 행 추가
function go_record_add()
{
var oRow = order_extra_list.insertRow(-1); // insertRow(0) 인 경우는 맨처음에 삽입, insertRow(-1) 인 경우는 맨마지막에 삽입, insertRow(n)인 경우는 특정 위치에 삽입
oRow.onmouseover=function(){order_extra_list.clickedRowIndex=this.rowIndex};
var oCell1 = oRow.insertCell(0); // 순번 레이블
var oCell2 = oRow.insertCell(1); // 필드1:input-text
var oCell3 = oRow.insertCell(2); // 필드2:input-text
var oCell4 = oRow.insertCell(3); // 필드3:input-text
var oCell5 = oRow.insertCell(4); // 추가 버튼:a
oCell1.height = "32";
oCell1.style.backgroundColor = "#EEEEEE"; // 자바스크립트처럼 속성에 접근해야 한다.
oCell1.align = "center";
oCell2.align = "center";
oCell3.align = "center";
oCell4.align = "center";
oCell5.align = "center";
var rowCount = jQuery("table#order_extra_list tr").length;
oCell1.innerHTML = rowCount - 1;
oCell2.innerHTML = "<input type=\"text\" name=\"uniform_number[]\" style=\"width:50px\" class=\"inputTypeText\" />";
oCell3.innerHTML = "<input type=\"text\" name=\"uniform_name[]\" style=\"width:50px\" class=\"inputTypeText\" />";
oCell4.innerHTML = "<input type=\"text\" name=\"height[]\" style=\"width:50px\" class=\"inputTypeText\" />";
oCell5.innerHTML = "<span class=\"button\"><a href=\"javascript:void go_record_del()\">삭제</a></span>";
}
// 행 삭제
function go_record_del()
{
order_extra_list.deleteRow(order_extra_list.clickedRowIndex);
}
// 모든 행 삭제
function go_record_alldel()
{
// 매번 출력시 전체행을 삭제한다. 전체행의 삭제시 행번호 1번만 전체 행의 개수-1 만큼 반복 삭제한다.
var rowCount = jQuery("table#order_extra_list tr").length;
if (rowCount > 1) {
for (i = 1; i <= rowCount - 1; i++)
order_extra_list.deleteRow(1);
}
}
//-->
</script>
소스
<table id="order_extra_list" name="order_extra_list" width="100%" border="1" bordercolor="#DDDDDD" cellpadding="6" cellspacing="0" style="border-collapse:collapse;margin-top:5px;">
<tr height="32" onMouseOver="order_extra_list.clickedRowIndex=this.rowIndex">
<td align="center" style="width:30px">순번</td>
<td align="center" style="width:50px">필드1</td>
<td align="center" style="width:50px">필드2</td>
<td align="center" style="width:50px">필드3</td>
<td align="center"><input type='button' value=' add ' onclick='javascript:void go_record_add()'></td>
</tr>
</table>
<tr height="32" onMouseOver="order_extra_list.clickedRowIndex=this.rowIndex">
<td align="center" style="width:30px">순번</td>
<td align="center" style="width:50px">필드1</td>
<td align="center" style="width:50px">필드2</td>
<td align="center" style="width:50px">필드3</td>
<td align="center"><input type='button' value=' add ' onclick='javascript:void go_record_add()'></td>
</tr>
</table>
댓글목록
등록된 댓글이 없습니다.