예제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 값을 이용해 값을 배열에 저장하기
