HTML에 데이터 저장하기[JSP]

01. HTML에 데이터 저장하기

 - 특정 데이터를 태그 속성안에 저장하여 자바스크립트로 불러와 데이터를 사용할 수 있는 방법에 대해 알아보기.

 <table>
    <tr data-id="1">
        <td>1</td>
        <td>1학년</td>
        <td>1학기</td>
    </tr>
    <tr data-id="2">
        <td>2</td>
        <td>1학년</td>
        <td>2학기</td>
    </tr>
    <tr data-id="3">
        <td>3</td>
        <td>2학년</td>
        <td>1학기</td>
    </tr>
    <tr data-id="4">
        <td>4</td>
        <td>2학년</td>
        <td>2학기</td>
    </tr>
    <tr data-id="5">
        <td>5</td>
        <td>3학년</td>
        <td>1학기</td>
    </tr>
    <tr data-id="6">
        <td>6</td>
        <td>3학년</td>
        <td>2학기</td>
    </tr>
</table>

와 같은 데이블이 있을때 data-id="value" 라는 속성을 추가하여 자바 스크립트에서 쉽게 불러와 데이터를 이용할 수 있습니다.

	$().ready(function() {
		
		$("[data-id]").each(function() {
			
			var $this = $(this);
			
			var dataId = $this.attr("data-id");
			console.log("dataId : " + dataId);
		});
		
	});

위와같이 $("[속성]")으로 반복문을 돌아 $(this).attr("속성");으로 데이터를 불러올 수 있습니다.

그럼 console.log에 찍힌 값들을 알아볼까요??

실행 후 콘솔에 찍힌 데이터를 보니 위에 tr 속성에 작성한 데이터를 잘 출력되는것을 확인할 수 있었습니다.

이름을 data-id뿐만 아니라 자신이 원하는 속성 이름으로 변경하여 불러올 수도있습니다.

예를 들어 mindol-story 라던가 하는 이름으로 말이죠!