querySelectorAll 활용

var 변수명 = document.querySelectorAll('CSS셀렉터');
.querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 반환하는 속성이다.

이를 활용하여, input 태그의 data- 로 시작하는 커스텀 속성을 받아올 수 있다.

위 두가지를 활영하여, 한페이지에서 각각의 input박스에 따라 DB에 저장을 달리 할 때, Flag값으로 응용하여 사용함.
즉 thead 의 input박스는 Flag 값 H, tbody의 Input 박스는 Flag 값 P 로 각각 따로 저장하기 위함
ajax 부분과, controller 부분은 기재하지 않음.

[JavaScript]
    var posHeader = "";
    var posPoint = "";
    
    var headerItems = document.querySelectorAll('input[data-item=posHeader]');
    var pointItems = document.querySelectorAll('input[data-item=posPoint]');
    
    console.log(headerItems);
    
    for(var i = 0;i < headerItems.length; i++){
        posHeader += ","+jq("input[data-item=posHeader]").eq(i).val()
    }
    
    for(var i = 0;i < pointItems.length; i++){
        posPoint += ","+jq("input[data-item=posPoint]").eq(i).val()
    }

 

[JSP]
                        <thead id="thead">
                            <tr class="first">
                                <th scope="col">등급</th>
                                <th scope="col">기준</th>
                                <th scope="col">
                                    <input type="text" style="width:100%;" data-item="posHeader" id="posProHeader1" name="posProHeader1"/>
                                </th>
                                <th scope="col">
                                    <input type="text" style="width:100%;" data-item="posHeader" id="posProHeader2" name="posProHeader2"/>
                                </th>
                                <th scope="col">
                                    <input type="text" style="width:100%;" data-item="posHeader" id="posProHeader3" name="posProHeader3"/>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>5</td>
                                <td>매우 높음</td>
                                <td>
                                    <input type="text" style="width:100%;" data-item="posPoint" id="posProPointVH1" name="posProPointVH1"/>
                                </td>
                                <td>
                                    <input type="text" style="width:100%;" data-item="posPoint" id="posProPointVH2" name="posProPointVH2"/>
                                </td>
                                <td>
                                    <input type="text" style="width:100%;" data-item="posPoint" id="posProPointVH3" name="posProPointVH3"/>
                                </td>
                            </tr>