편집 기록

편집 기록
  • 프로필 엽토군님의 편집
    날짜2019.08.30

    table 동적삭제 질문드립니다.


    옵션을 선택하면 목록이 나오고 지우고 하는 화면을 만들고 있습니다.

    옵션을 선택한 화면을 테이블로 만들었는데 검색을 해보면 테이블은 tr을 이용하여 선택한 행을 지우라고 하는데 저는 한 테이블에 여러개의 tr을 갖고 있습니다.

    그래서 행을 지우는 " buytable.deleteRow(buytable.clickedRowIndex); " 이 부분을 여러개 추가해서 만들어 보니 한번에 지워지기는 하는데 삭제버튼이 사라지지 않습니다.

    그리고 선택한 행이 아닌 처음 입력한 값부터 삭제가 되구요.

    선택한 행을 이용하는 방법 말고 다른 방법은 무엇이 있나요?

    div로 바꿔서도 만들어 봤는데 div는 remove함수를 사용하여 지우고 다시 목록을 클릭하면 데이터가 들어가지 않는 현상이 있었습니다..

    <h4>옵션</h4>
    <form id="saleForm" action="/sale" method="post">
        <select id="selectOption" name="selectOption" class="form-control" style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px;
    line-height: 1.42857143; color: #555; background-color: #fff; background-image: none;
    border: 1px solid #ccc; border-radius: 4px;">
            <option value="">선택하세요</option>
            <c:forEach var="buyOption" items="${buyOption}">
                <option id="${buyOption.buyOptionCode}" value="${buyOption.optionPrice}">${buyOption.optionName} (₩
                    ${buyOption.optionPrice})</option>
            </c:forEach>
        </select>
        <br>
        <table id="buytable" border=1px cellpadding=0> </table>
        <script type="text/javascript">
            var strHTML = "";
            var count = 1;
            // selectBox누르면 옵션 나오는 changefunction
            $("#selectOption").change(function () {
                var option = $("#selectOption option:selected").text(); // 선택한 값 text(상품명)
                var price = $("#selectOption option:selected").val();   // 선택한 값 value(가격)
                var langSelect = document.getElementById("selectOption");
                var num = langSelect.options[langSelect.selectedIndex].id;  // 선택한 값 id(상품코드)
    
                //      strHTML += "<table id='buytable' border='1' cellpadding='0'>";
                strHTML += "<th>옵션 " + count + "</th>";
                strHTML += "<tr><input type=text name=item_index id=" + num + " readonly value=" + num + " style=\"display:none\">";
                strHTML += "<td colspan='2'>" + option + "</td></tr>";
                strHTML += "<tr bgcolor='#E2E2E2' align='center'>";
                strHTML += "<td style='width:40%'>" + price + "</td>";
                strHTML += "<td style='width:10%'><input class=form-control type=number name=itemnum min=1></td>";
                strHTML += "</tr>";
                strHTML += "<tr><button class=mybtn type=button onClick=\"delRow()\" name=dyntbl1_delRow><i class=\"fas fa-trash-alt\"></i></button></tr>";
    
                //        strHTML += " </table>";
    
                document.getElementById("buytable").innerHTML = strHTML;
                count++;
    
                // onmouseover이벤트가 발생될때 fncOnMouseOver함수를 호출한다.
                strHTML.onmouseover = function () { fncOnMouseOver(this.rowIndex) };
    
    
                // selectbox 초기화. 옵션의 첫 번째 값 구함.(선택해주세요로 이동)
                $('#selectOption').find('option:first').attr('selected', 'selected');
    
    
            });
    
            function delRow() {
                // table에서 지정한 줄(tr)을 rows 컬렉션에서 삭제한다.
                //    divTest.deleteRow(buytable.clickedRowIndex);
                buytable.deleteRow(buytable.clickedRowIndex);
                buytable.deleteRow(buytable.clickedRowIndex);
                buytable.deleteRow(buytable.clickedRowIndex);
                buytable.deleteRow(buytable.clickedRowIndex);
            }
        </script>
    </form>
    
  • 프로필 A-YEYE님의 편집
    날짜2019.08.29

    table 동적삭제 질문드립니다.


    옵션을 선택하면 목록이 나오고 지우고 하는 화면을 만들고 있습니다.

    옵션을 선택한 화면을 테이블로 만들었는데 검색을 해보면 테이블은 tr을 이용하여 선택한 행을 지우라고 하는데 저는 한 테이블에 여러개의 tr을 갖고 있습니다.

    그래서 행을 지우는 " buytable.deleteRow(buytable.clickedRowIndex); " 이 부분을 여러개 추가해서 만들어 보니 한번에 지워지기는 하는데 삭제버튼이 사라지지 않습니다.

    그리고 선택한 행이 아닌 처음 입력한 값부터 삭제가 되구요.

    선택한 행을 이용하는 방법 말고 다른 방법은 무엇이 있나요?

    div로 바꿔서도 만들어 봤는데 div는 remove함수를 사용하여 지우고 다시 목록을 클릭하면 데이터가 들어가지 않는 현상이 있었습니다..

                        <h4>옵션</h4>
                        <form id="saleForm" action="/sale" method="post">
                        <select id="selectOption" name="selectOption" class="form-control" 
                        style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px;
                        line-height: 1.42857143; color: #555; background-color: #fff; background-image: none;
                        border: 1px solid #ccc; border-radius: 4px;" >
                        <option value="">선택하세요</option>
                            <c:forEach var="buyOption" items="${buyOption}">
                                <option id="${buyOption.buyOptionCode}" value="${buyOption.optionPrice}">${buyOption.optionName}  (₩ ${buyOption.optionPrice})</option>
                            </c:forEach>
                        </select>
                        <br>
    
                        <table id="buytable" border=1px cellpadding=0> </table>     
    
    
    
        <script type="text/javascript">
                        var strHTML = "";
                        var count = 1;
    
                        // selectBox누르면 옵션 나오는 changefunction
                        $("#selectOption").change(function() {
                            var option = $("#selectOption option:selected").text(); // 선택한 값 text(상품명)
                            var price = $("#selectOption option:selected").val();   // 선택한 값 value(가격)
                            var langSelect = document.getElementById("selectOption");
                            var num = langSelect.options[langSelect.selectedIndex].id;  // 선택한 값 id(상품코드)
    
                    //      strHTML += "<table id='buytable' border='1' cellpadding='0'>";
                            strHTML += "<th>옵션 " + count + "</th>";
                            strHTML += "<tr><input type=text name=item_index id="+num+" readonly value="+num+" style=\"display:none\">";
                            strHTML += "<td colspan='2'>"+ option +"</td></tr>";
                            strHTML += "<tr bgcolor='#E2E2E2' align='center'>";
                            strHTML += "<td style='width:40%'>"+price+"</td>";
                            strHTML += "<td style='width:10%'><input class=form-control type=number name=itemnum min=1></td>";
                            strHTML += "</tr>";
                            strHTML += "<tr><button class=mybtn type=button onClick=\"delRow()\" name=dyntbl1_delRow><i class=\"fas fa-trash-alt\"></i></button></tr>";
    
                    //        strHTML += " </table>";
    
                            document.getElementById("buytable").innerHTML = strHTML;
                            count++; 
    
                         // onmouseover이벤트가 발생될때 fncOnMouseOver함수를 호출한다.
                            strHTML.onmouseover=function(){fncOnMouseOver(this.rowIndex)};
    
    
                            // selectbox 초기화. 옵션의 첫 번째 값 구함.(선택해주세요로 이동)
                            $('#selectOption').find('option:first').attr('selected', 'selected');   
    
    
                        });
    
                         function delRow() 
                          {
                             // table에서 지정한 줄(tr)을 rows 컬렉션에서 삭제한다.
                           //    divTest.deleteRow(buytable.clickedRowIndex);
                               buytable.deleteRow(buytable.clickedRowIndex);
                               buytable.deleteRow(buytable.clickedRowIndex);
                               buytable.deleteRow(buytable.clickedRowIndex);
                               buytable.deleteRow(buytable.clickedRowIndex);
                           }
    
    
                        </script>