참고① http://dolgo.net/php/questions/113
참고② http://www.nextree.co.kr/p10155
■ data() 메서드를 통해 엘리먼트를 변수처럼 사용하기
자바스크립트 상에서 PHP, JSP등의 코드를 포함하여 쓰는것은 그렇게 좋은 코딩방법이라고 하기 힘들다.
필자도 그래서 <script> 상에서 <?=?>(PHP의 경우), <%=%>(JSP)의 경우를 사용하는것을 최대한 자제하고.
PHP의 경우
| <input type="hidden" name="print" value="<?=$변수명?>"/>
|
JSP의 경우
| <input type="hidden" name="print" value="<%=변수명%>"/> |
위와같이 hidden 타입에 필요한 값을 담아서 사용해왔었다.
# 소스코드
<html>
<head>
<title>:: HIDDEN 데이터 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert(
"이름 : " + jQuery(".memberName").eq(0).val()
+ "\n출생 : " + jQuery(".memberBirth").eq(0).val()
)
});
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>소속</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="hidden" class="memberName" value="안지현"/>
<input type="hidden" class="memberBirth" value="1997-10-13"/>
01
</td>
<td>안지현</td>
<td>넥센 히어로즈</td>
</tr>
<tr>
<td>02</td>
<td>조연주</td>
<td>한화 이글스</td>
</tr>
<tr>
<td>03</td>
<td>박기량</td>
<td>롳데 자이언츠</td>
</tr>
</tbody>
</table>
</body>
</html> |
# 출력결과
하지만 최근 jQuery의 data( ) 메소드에대해 알게 되어서 이렇게 정리하게 되었다.
#01. data() 메서드를 통한 데이터 읽어오기
# 소스코드
<html>
<head>
<title>:: jQuery DATA 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert(
"이름 : " + jQuery("tbody > tr").eq(1).data("member_name")
+ "\n출생 : " + jQuery("tbody > tr").eq(1).data("member_birth")
)
});
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>소속</th>
</tr>
</thead>
<tbody>
<td>01</td>
<td>안지현</td>
<td>넥센 히어로즈</td>
<!-- data-member_name 과같이 중간에 대문자가 들어가는 카멜 표기법은 사용할 수 없다. -->
<tr
data-member_name = "조연주"
data-member_birth = "1999-06-04"
>
<td>
02
</td>
<td>조연주</td>
<td>한화 이글스</td>
</tr>
<tr>
<td>03</td>
<td>박기량</td>
<td>롳데 자이언츠</td>
</tr>
</tbody>
</table>
</body>
</html> |
# 출력결과
위와 같이 data-* 로 선언한 값들을 손쉽게 가져올 수 있는 것을 확인 할 수 있다.
사실 어떻게 쓰든 사용자에게만 보여주지 않을뿐으로,
사용하는 목적은 type="hidden"과 data-*의 방식은 크게 다를 것이 없겠지만.
type="hidden" form 태그를 통해 데이터를 submit 하는 방식으로 전송할때 hidden으로 선언한 데이터를 전송할 수 있다는 것에서
이점이 있을 것이고,
data-*는 클라이언트 페이지에서 스크립트와 AJAX를 통해 다룰 데이터를 삽입하면 유용할 것이고,
반복문등을 통한 다수의 게시글 리스트등을 뿌려주는곳에서 데이터의 삽입이 조금더 편하게 제작이 가능할 것으로 보이기 때문에
위에 적은 각각의 장점을 용도에 맞게 사용하려 한다.
#02. data() 메서드를 통한 데이터 변경하기
# 소스코드
<html>
<head>
<title>:: jQuery DATA 변경하기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("tbody > tr").eq(2).data("member_name", "박기량");
jQuery("tbody > tr").eq(2).data("member_birth", "1991-02-18");
alert(
"이름 : " + jQuery("tbody > tr").eq(2).data("member_name")
+ "\n출생 : " + jQuery("tbody > tr").eq(2).data("member_birth")
)
});
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>소속</th>
</tr>
</thead>
<tbody>
<td>01</td>
<td>안지현</td>
<td>넥센 히어로즈</td>
<tr>
<td>02</td>
<td>조연주</td>
<td>한화 이글스</td>
</tr>
<tr
data-member_name = "치어리더"
data-member_birth = "0000-00-00"
>
<td>03</td>
<td>박기량</td>
<td>롳데 자이언츠</td>
</tr>
</tbody>
</table>
</body>
</html> |
# 출력결과
