.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
function deleteLine(obj, idx) {
//버튼의 부모 > td
//td > 부모 tr
//따라서 parent 두번
var tr = $(obj).parent().parent();
tr.remove();
$(".k"+idx).remove();
}
</script>
<table border="1">
<c:forEach begin="1" end="10" step="1" var="idx">
<tr>
<td>${idx }</td>
<td>Okky ${idx } 내용입니다.</td>
<td><button onclick="deleteLine(this, ${idx});">${idx} 삭제</button></td>
</tr>
</c:forEach>
</table>
<c:forEach begin="1" end="10" step="1" var="idx">
<div class="k${idx}">
<input type="text" value="${idx } 내용" >
<input type="text" value="${idx } 내용" >
<button >${idx} 버튼</button>
</div>
</c:forEach>
<hr style="border:2px red solid" >
<script type="text/javascript">
function deleteLine2( idx) {
$(".k"+idx).remove();
}
</script>
<table border="1">
<c:forEach begin="1" end="10" step="1" var="idx">
<tr class="k${idx}">
<td>${idx }</td>
<td>Okky ${idx } 내용입니다.</td>
<td><button onclick="deleteLine2(${idx});">${idx} 삭제</button></td>
</tr>
</c:forEach>
</table>
<c:forEach begin="1" end="10" step="1" var="idx">
<div class="k${idx}">
<input type="text" value="${idx } 내용" >
<input type="text" value="${idx } 내용" >
<button >${idx} 버튼</button>
</div>
</c:forEach>
</body>
</html>
댓글 ( 4)
댓글 남기기