프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] 동적 TR 생성

2014.01.27
북마크 [출처 이동]    작성자 정보
데모보기
http://relation.co.kr/images_board/board_system_publishing/96/test.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function call(){

var tbl = document.getElementById("tbl");
var tbl_length = tbl.rows.length;

var tr1 = tbl.insertRow( tbl_length );
tr1.id = "tr1_"+tbl_length.toString();

var td1 = tr1.insertCell(0);
td1.id = "td1"+tbl_length;

td1.innerHTML = "<input type='file'>";
td1.innerHTML += "<input type='button' onclick='delRow();' value='Del"+tr1.id+"'>" ;

}

function del(){

var tbl = document.getElementById("tbl");
var tbl_length = tbl.rows.length;

tbl.deleteRow(tbl_length-1);

}


function delRow(){

var currentElement = window.event.srcElement;
var currentTable = currentElement.parentNode.parentNode.parentNode;
var currentRowIndex = currentElement.parentNode.parentNode.rowIndex;

currentTable.deleteRow( currentRowIndex );

}

</script>


</head>



<input type="button" value="Add" onclick="call();" />
<input type="button" value="Del" onclick="del();" />
<table id="tbl">
<tr>
<td>title</td>
</tr>
</table>


<body>
</body>
</html>

이 포스트 공유하기

전체목록