일하면서 기록하기

HTML에서 커스텀 데이터라고 데이터를 저장하는 방법이 있다.
data-작명="값"  이런 방식으로 넣으면 된다.

데이터 속성은 순 HTML이기 때문에 CSS에서도 접근이 가능하다.

자바스크립트에서 커스텀 데이터에 접근하려면
document.getElementByClassName('tab-button').dataset.id; 이렇게 하면 접근할 수 있다.

커스텀 데이터 말고도 제이쿼리로도 데이터를 강제로 입력할 수 있다.

$('.list).data('작명', '값'); 이렇게 하고

console.log( $('.list).data('작명') ); 찍어보면

이렇게 데이터를 저장하고 불러올 수 있다.

예제1

<table>
	<input type="text" class="sample" id="a1" name="inputVal" value="1">
	<input type="text" class="sample" id="a2" name="inputVal" value="2">
	<input type="text" class="sample" id="a3" name="inputVal" value="3">
	<input type="text" class="sample" id="a4" name="inputVal" value="4">
</table>

예를들어 위에 처럼 테이블이 있다 치면 각 다른 id값을 이용해 데이터 값을 받아올 수 있지만 그렇게 되면 코드가 길어지고 id값을 하나씩 정하기 귀찮아진다.

그래서 name값을 이용해 자바스크립트의 배열에 저장할 수 있다.

var param = [];
var sampleArr = $('[name="inputVal"]');

for ( var i = 0 ; i < sampleArr.length ; i++ ) {
	param.push(sampleArr[i].value);
}

var sampleStr = '';

param.map(function(item){
	sampleStr += item + ',';
});
//마지막 구분점 지우기
sampleStr = sampleStr.substr( 0 , sampleStr.lastIndexOf(',') );

이렇게 하면 sampleStr에 값들이 하나씩 들어가 "값1, 값2, 값3, 값4" 이런식의 하나의 문자열이 된다.
이걸 split으로 나눠서 반복문으로 값을 나눠서 이용해도 되고

[ "값1" , "값2" , "값3" , "값4" ] 이렇게 배열로 값이 들어간 param을 이용해도 된다.

근데 여기서 구분점을 ,로 했는데 정규표현식을 검색해서 ^나 |, \ 처럼 일상생활에서 잘 안쓰이는 문자를 구분점으로 사용해야 한다.
쉼표(.)를 구분점으로 사용하면 데이터를 입력하는중 , 를 만나면 구분점으로 인식되어 우리가 원하는 대로 데이터가 들어가지 않게 된다.

Stgring getStr = (request.getParameter("변수명"));

Sgtring[] getStrAry = getStr.split(",", -1);

자바소스에서 위에처럼 해주면 앞에서 받아온 문자열을 배열 getStrAry에 담을 수 있다.

예제2

<table>
	<input type="text" class="sample" id="a1" name="STR_NAME">
	<input type="text" class="sample" id="a2" name="STR_CTNT">
    
    <input type="text" class="sample" id="a3" name="STR_NAME">
	<input type="text" class="sample" id="a4" name="STR_CTNT">
    
    <input type="text" class="sample" id="a5 name="STR_NAME">
	<input type="text" class="sample" id="a6" name="STR_CTNT">
    
    <input type="text" class="sample" id="a7 name="STR_NAME">
	<input type="text" class="sample" id="a8 name="STR_CTNT">
</table>

첫번째 꺼는 input하나의 값을 받아온느 거였는데 바로 위에 table처럼 받아와야 하는 값이 2개면

배열 param에 객체를 담으면 된다

var param = [];
var sampleArr1 = $('[name="STR_NAME"]');
var sampleArr2 = $('[name="STR_CTNT"]');

for ( var i = 0 ; i < sampleArr1.length ; i++ ) {
	var obj = {};
    obj.name = sampleArr1[i].value;
    obj.ctnt = sampleArr2[i].value;
	param.push(obj);
}

var nameStr = '';
var ctntStr = '';

param.map(function(item){
	nameStr += item + '|';
    ctntStr += item + '|';
});
//마지막 구분점 지우기
nameStr = nameStr.substr( 0 , nameStr.lastIndexOf('|') );
ctntStr = ctntStr.substr( 0 , ctntStr.lastIndexOf('|') );

이렇게 하면 nameStr과 ctntStr에 첫번째 예시 처럼 값이 문자열로 들어간다.

예제3

<table>
	<input type="text" class="sample" data-set="한국어" id="a1" name="STR_NAME">
	<input type="text" class="sample" data-set="한국어" id="a2" name="STR_CTNT">
    
    <input type="text" class="sample" data-set="영어" id="a3" name="STR_NAME">
	<input type="text" class="sample" data-set="영어" id="a4" name="STR_CTNT">
    
    <input type="text" class="sample" data-set="일본어" id="a5 name="STR_NAME">
	<input type="text" class="sample" data-set="일본어" id="a6" name="STR_CTNT">
    
    <input type="text" class="sample" data-set="중국어" id="a7 name="STR_NAME">
	<input type="text" class="sample" data-set="중국어" id="a8 name="STR_CTNT">
</table>

data 커스텀도 응용할 수 있다.

var param = [];
var sampleArr1 = $('[name="STR_NAME"]');
var sampleArr2 = $('[name="STR_CTNT"]');

for ( var i = 0 ; i < sampleArr1.length ; i++ ) {
	var obj = {};
    obj.lang = sampleArr1[i].getAttribute("data-set");
    obj.name = sampleArr1[i].value;
    obj.ctnt = sampleArr2[i].value;
	param.push(obj);
}
var langStr = '';
var nameStr = '';
var ctntStr = '';

param.map(function(item){
	langStr += item + '|';
	nameStr += item + '|';
    ctntStr += item + '|';
});
//마지막 구분점 지우기
langStr = nameStr.substr( 0 , nameStr.lastIndexOf('|') );
nameStr = nameStr.substr( 0 , nameStr.lastIndexOf('|') );
ctntStr = ctntStr.substr( 0 , ctntStr.lastIndexOf('|') );

이렇게 하면  param에는 obj ={ lang, name, ctnt } 이렇게 3개의 값이 들어간 객체가 배열에 저장된다.

응용을 하자면 data 커스텀값을 위에서 처럼 읽어와 값이 영어일떄, 한국어 일때 같이 조건문을 줘서

param1, param2, param3 이런식으로 각각의 배열에 저장후 데이터를 저장할 수 있다.

근데 단점은 name값을 전부다 가져오기 때문에 중간에 필요없는거는 안가져오고 싶어도 가져오게 된다.

name 값을 이용해 값을 배열에 저장하기