JQUERY/JQUERY 이용한 동적 테이블 변경
JQUERY 이용한 동적 테이블 변경
정윤재
2011. 2. 5. 13:09
완벽하게 JQUERY 를 이용하지는 못했지만 코드가 많이 줄어들긴 했다.
우선 그 정도로 만족해야 할 것 같다.
JQUERY를 사용하는 이유가 코딩을 줄이기 위해서 일테니까
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="./js/jquery-1.4.4.min.js"></script>
<script>
function add(){
$("#addtbl").after("<tr onmouseover=\"changeTbl.clickedRowIndex=this.rowIndex\"><td>ccc</td><td>ddd<input type='button' value='삭제' onclick=\"del()\"'></td></tr>");
}
function del(){
var tbl =document.getElementById("changeTbl");
tbl.deleteRow(tbl.clickedRowIndex);
}
</script>
</head>
<body>
<form name="f">
<table border="1" id="changeTbl">
<tr id="addtbl">
<td>aaaa</td>
<td><input type="button" onclick="add()" value="추가"></td>
</tr>
</table>
</form>
</body>
</html>
우선 그 정도로 만족해야 할 것 같다.
JQUERY를 사용하는 이유가 코딩을 줄이기 위해서 일테니까
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="./js/jquery-1.4.4.min.js"></script>
<script>
function add(){
$("#addtbl").after("<tr onmouseover=\"changeTbl.clickedRowIndex=this.rowIndex\"><td>ccc</td><td>ddd<input type='button' value='삭제' onclick=\"del()\"'></td></tr>");
}
function del(){
var tbl =document.getElementById("changeTbl");
tbl.deleteRow(tbl.clickedRowIndex);
}
</script>
</head>
<body>
<form name="f">
<table border="1" id="changeTbl">
<tr id="addtbl">
<td>aaaa</td>
<td><input type="button" onclick="add()" value="추가"></td>
</tr>
</table>
</form>
</body>
</html>