반응형

질문글중에 이런코드가 있었다


-HTML 단

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<tr>
  <td id="title">
      <input class="input" type="text" id="nameEdit4" name="nameEdit4" value="123">
      <input xlass="input" type="hidden" id="fileData1" name="fileData" value="170620_검토중.xlsx">
      <input class="input" type="hidden" id="fileData2" name="fileData" value="error.txt">
      <input class="input" type="hidden" id="fileData3" name="fileData" value="">
      <input class="input" type="hidden" id="fileData4" name="fileData" value="">
      <input class="input" type="hidden" id="fileData5" name="fileData" value="">
      <span class="value" value="">123</span>
  </td>
  <td>
    <div class="tools">
      <a class="modal detail-btn" href="#" data-modal-index="1"  >
      <i class="icon popup icon-22px lightblue" id="icon4" onclick="myFunction(this)"></i></a> 
    </div>
  </td>
</tr>
cs

-Script 단
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function myFunction(x) {
 
    var count = x.closest("tr").rowIndex;
 
    var fileValue = $("#icon"+count).closest("tr").find("input[type=hidden][value!='']").length;
 
    alert(fileValue);
 
    for(var b=1; b<fileValue+1; b++){
 
         var fileData = new Array();
 
         fileData[b] = document.getElementById("fileData"+ b).value;
 
    }
 
}
cs


대충보면 hidden name이 fileData인 값을 value값을 가져오고 싶어하는거같은데 몇가지 문제점을 보면


-Input ID의 하드코딩

-1부터 시작하는 아이디로 for문에서의 난잡함

-Array를 for문 안에서 생성함


이곳에서 file data의 값을 가져오고 싶다는거였는데 대충봐도 난잡하고 fileData가 1부터 시작해서 for문도 수정해야하고 대체적으로 수정이 필요해보였다


그래서 수정을 이렇게 해보았다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 
<script>
function myFunction(x) {
 
    var fileValue = $("input[name='fileData']").length;
    var fileData = new Array(fileValue);
    for(var i=0; i<fileValue; i++){                          
         fileData[i] = $("input[name='fileData']")[i].value;
    }
}
 
 
</script>
</head>
<body>
 
<tr>
  <td id="title">
      <input class="input" type="text" id="nameEdit4" name="nameEdit4" value="123">
      <input class="input" type="hidden" name="fileData" value="170620_검토중.xlsx">
      <input class="input" type="hidden" name="fileData" value="error.txt">
      <input class="input" type="hidden" name="fileData" value="1">
      <input class="input" type="hidden" name="fileData" value="2">
      <input class="input" type="hidden" name="fileData" value="3">
      <span class="value" value="">123</span>
  </td>
  <td>
    <div class="tools">
      <a class="modal detail-btn" href="#" data-modal-index="1"  >      
      <input type="button" value="클릭" onclick="myFunction()"/>
    </div>
  </td>
</tr>
 
</body>
</html>
cs


이런식으로 하면 유동적이게 fileData를 불러와서 배열순으로 값을 넣어서 보여줄수가있다

fileData 라는 name이 다른부분에도 있다면 그부분의 name을 다르게 주거나 유니크하게 셀렉트할수있도록 수정해야할것같다

반응형

'IT > Javascript|Jquery' 카테고리의 다른 글

비밀번호검증 스크립트(연속,반복)  (0) 2018.01.22
통화형식 (3자리 콤마) 사용하기 예제  (0) 2018.01.19
javascript - jQuery로 HTML 문자열 이스케이프 처리하기  (2) 2018.01.12
SHA256 인코딩 소스  (4) 2018.01.10
비밀번호 /이메일/전화번호/핸드폰 정규식  (5) 2018.01.09

+ Recent posts

티스토리툴바