[jQuery] 공통으로 선택자 처리

목차

거창할 건 없고 매개변수로 넘긴 문자열 앞에 "#"를 붙여서 아이디 선택자로 만들어서 처리한다.

소스를 보면 바로 이해가 된다.

---

html

상단 탭에 클릭 이벤트를 줬고 2개의 매개변수를 넘긴다.

<!-- 상단 탭 -->
<ul class="tabs" style="width:30%;">
    <li class="tabs-item active">
        <a href="#tab01" class="tabs-link">전체메뉴</a>
    </li>
    <li class="tabs-item">
        <a href="#tab02" class="tabs-link" onclick="getMenuList('2', 'fbMenuBody')">인기메뉴</a>
    </li>
    <li class="tabs-item">
        <a href="#tab03" class="tabs-link" onclick="getMenuList('3', 'spMenuBody')">특별메뉴</a>
    </li>
</ul>

<!-- ... 생략 -->

<!-- 전체메뉴 동적 그려질 body -->
<tbody id="">
</tbody>

<!-- 인기메뉴 동적 그려질 body -->
<tbody id="fbMenuBody">
</tbody>

<!-- 특별메뉴 동적 그려질 body -->
<tbody id="spMenuBody">
</tbody>

script

구분자를 받아서 서버로 넘겨서 구분자에 해당되는 데이터를 조회, tartget id명을 받아서 "#"를 붙여 선택자로 처리, 이러면 function 여러개 만들 필요 없이 저 function 하나로 처리가 가능하다.(화면에서 하나의 테이블만 바라보고 테이블에 구분자 컬럼이 있음)

누구나 알고 있을 수 있지만 그래도 메모한다.

function getMenuList(gubun, target) {

    $.ajax({
        url: '/info/selectMenuList.do',
        type: 'POST',
        data: { searchCnd: gubun },
        dataType:'json',
        success: function (data) {

            var html = "";

            for(var i = 0; i < data.resultList.length; i++) {

                html += '<tr>';
                html += '<td id="rowNum">' + data.resultList[i].rn;
                html += '</td>';
                html += '<td id="menuNm">' + data.resultList[i].menuNm;
                html += '</td>';
                html += '<td id="price">' + data.resultList[i].price;
                html += '</td>';
                html += '</tr>';
            }
            $("#" + target).html(html);
        },
        error: function (error) {
            console.error('Error:', error);
        }
    });
}

구분자와 tbody id명을 받아서 구분자에 따라 데이터를 다르게 가져와서 각각의 tbody에 동적으로 tr, td요소를 붙인다.

---

개인 스터디 기록을 메모하는 공간이라 틀린점이 있을 수 있습니다.

틀린 점 있을 경우 댓글 부탁드립니다.