JQuery

.

 

<%@ 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>

 

 

about author

PHRASE

Level 60  머나먼나라

천지만물을 잘 관찰해서 그 이치를 알고 그것을 나에게 맞추어서 고찰하는 것이 좋다. 그렇게 함으로써 명지(明知)에 달할 수 있는 것이다. 천리(天理)와 인심(人心)은 원래 하나다. 천리는 사물도 나와 일관해 있기 때문이다. 정이천(程伊川)이 한 말. -근사록

댓글 ( 4)

댓글 남기기

작성