2018/01/11 09:35

테이블 내에서 개체별 인덱스 구하여 버튼 동작하는 방법 JQuery


방법 1) 테이블의 인덱스 값을 id로 지정하고 스크립트 내에서 별개로 인덱스 값을 구하여 테이블 내의 인덱스와 대조, 해당 열의 text를 구한다.


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>물품 등록</title>
<link rel="stylesheet" href="css/w3.css" />
</head>
<body>
<form action="v2_iteminsert1.do" method="post">
<table class="w3-table">
<tr>
<th>물품번호</th>
<th>물품명</th>
<th>가격</th>
<th>수량</th>
</tr>
<c:forEach var="i" begin="1" end="2" step="1">
<tr>
<td><input type="text" name="no[]" value="${lastno+i}" readonly /></td>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="price[]" /></td>
<td><input type="text" name="qty[]" /></td>
</tr>
</c:forEach>
<tr>
<td colspan="4">
<input type="submit" class="w3-button w3-black w3-round" value="추가" />
</td>
</tr>
</table>
</form>
<hr/>
<table class="w3-table">
<tr>
<th>물품번호</th>
<th>물품명</th>
<th>가격</th>
<th>수량</th>
<th>날짜</th>
</tr>
<c:forEach var="vo" items="${list}" varStatus="i">
<tr>
<td id="no_${i.index}">${vo.no}</td>
<td>${vo.name}</td>
<td>${vo.price}</td>
<td>${vo.qty}</td>
<td>${vo.date}</td>
<td>
<a href="#" class="w3-button w3-tiny w3-black">수정</a>
<a href="#" class="w3-button w3-tiny w3-black btn_delete">삭제</a>
</td>
</tr>
</c:forEach>
</table>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/sweetalert.min.js"></script>
<script>
$(function() {
$('.btn_delete').click(function() {
//인덱스는 0부터 시작함.
var idx = $(this).index('.btn_delete');
var no = $('#no_'+idx).text();
window.location.href='v2_itemdelete.do?no='+no;
});
});
</script>
</body>
</html>



방법 2) a 태그 내에 임의의 속성을 만들어 불러올 값을 집어넣고 스크립트에서 만든 속성을 호출하여 값을 사용.
일반적으로 사용되는 방법이 아니기 때문에 브라우저에 따라 만들어진 속성 myattr이 읽어지지 않을 수도 있다.


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>물품 등록</title>
<link rel="stylesheet" href="css/w3.css" />
</head>
<body>
<form action="v2_iteminsert1.do" method="post">
<table class="w3-table">
<tr>
<th>물품번호</th>
<th>물품명</th>
<th>가격</th>
<th>수량</th>
</tr>
<c:forEach var="i" begin="1" end="2" step="1">
<tr>
<td><input type="text" name="no[]" value="${lastno+i}" readonly /></td>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="price[]" /></td>
<td><input type="text" name="qty[]" /></td>
</tr>
</c:forEach>
<tr>
<td colspan="4">
<input type="submit" class="w3-button w3-black w3-round" value="추가" />
</td>
</tr>
</table>
</form>
<hr/>
<table class="w3-table">
<tr>
<th>물품번호</th>
<th>물품명</th>
<th>가격</th>
<th>수량</th>
<th>날짜</th>
</tr>
<c:forEach var="vo" items="${list}">
<tr>
<td>${vo.no}</td>
<td>${vo.name}</td>
<td>${vo.price}</td>
<td>${vo.qty}</td>
<td>${vo.date}</td>
<td>
<a href="#" class="w3-button w3-tiny w3-black">수정</a>
<a href="#" myattr="${vo.no}" class="w3-button w3-tiny w3-black btn_delete">삭제</a>
</td>
</tr>
</c:forEach>
</table>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/sweetalert.min.js"></script>
<script>
$(function() {
$('.btn_delete').click(function() {
var no1 = $(this).attr('myattr');
alert(no1);
window.location.href='v2_itemdelete.do?no='+no;
});
});
</script>
</body>
</html>

덧글

댓글 입력 영역