더블 클릭으로 모달창 띄우기

noticeTable라는 id를 가지고 있는 테이블의 tr 요소를 클릭하면 모달창을 띄우는 기능을 구현하고자 한다.

예제1. 더블 클릭으로 모달창 띄우기

<table class="table text-center" id="noticeTable">
    <thead>
        <tr>
            <th scope="col">NO.</th>
            <th scope="col">제목</th>
            <th scope="col">등록자</th>
            <th scope="col">등록일시</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>첫 번째 제목입니다.</td>
            <td>홍길동</td>
            <td>25-01-15 14:03:22</td>
        </tr>
        <tr>
            <td>2</td>
            <td>두 번째 제목입니다.</td>
            <td>김철수</td>
            <td>25-01-15 14:33:22</td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="dataAddModal" tabindex="-1" 
    aria-labelledby="dataAddModalLabel" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content mh-100 overflow-y-auto scrollbar">
            <form>
                <div class="modal-body">
                    <div>공지번호 NO.1</div>
                    <div>등록자: 홍길동</div>
                    <div>제목: 첫 번째 제목입니다.</div>
                    <div>공지내용</div>
                </div>
                <div class="modal-footer justify-content-center border-top-none">
                    <button type="button"class="btn btn-outline-grey" data-bs-dismiss="modal">취소</button>
                    <button type="submit" class="btn btn-data-add">저장</button>
                </div>
            </form>
        </div>
    </div>
</div>

document.addEventListener("DOMContentLoaded", function() {
    const tableRows = document.querySelectorAll("#noticeTable tbody tr");

    tableRows.forEach(function(row) {
        row.addEventListener("dblclick", function() {
            const modal = new bootstrap.Modal(document.getElementById('dataAddModal'));
            modal.show();
        })
    })
})

tr 요소가 한 개 이상일 경우를 생각하여 querySelectorAll 함수를 사용하여 noticeTable 테이블의 tr 요소들을 모두 찾도록 구현했다. tr 요소를 아무거나 더블클릭을 하면 dataAddModal이라는 id를 가진 모달창을 화면에 띄울 수 있다.

예제2. id 값으로 모달창 다르게 띄우기

tr 요소에 따라 다른 모달을 띄우고 싶어서 각 요소에 id 값을 부여했다. id가 1인 요소를 더블 클릭하면 dataAddModal1 모달창을 화면에 띄우고, id가 2인 요소를 더블 클릭하면 dataAddModal2 모달창을 화면에 띄운다.

<table class="table text-center" id="noticeTable">
    <thead>
        <tr>
            <th scope="col">NO.</th>
            <th scope="col">제목</th>
            <th scope="col">등록자</th>
            <th scope="col">등록일시</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="1">1</td>
            <td>첫 번째 제목입니다.</td>
            <td>홍길동</td>
            <td>25-01-15 14:03:22</td>
        </tr>
        <tr>
            <td id="2">2</td>
            <td>두 번째 제목입니다.</td>
            <td>김철수</td>
            <td>25-01-15 14:33:22</td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="dataAddModal" tabindex="-1" 
    aria-labelledby="dataAddModalLabel" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content mh-100 overflow-y-auto scrollbar">
            <form>
                <div class="modal-body">
                    <div>공지번호 NO.1</div>
                    <div>등록자: 홍길동</div>
                    <div>제목: 첫 번째 제목입니다.</div>
                    <div>공지내용</div>
                </div>
                <div class="modal-footer justify-content-center border-top-none">
                    <button type="button"class="btn btn-outline-grey" data-bs-dismiss="modal">취소</button>
                    <button type="submit" class="btn btn-data-add">저장</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="dataAddModal2" tabindex="-1" 
    aria-labelledby="dataAddModal2Label" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content mh-100 overflow-y-auto scrollbar">
            <form>
                <div class="modal-body">
                    <div>공지번호 NO.2</div>
                    <div>등록자: 김철수</div>
                    <div>제목: 두 번째 제목입니다.</div>
                    <div>공지내용</div>
                </div>
                <div class="modal-footer justify-content-center border-top-none">
                    <button type="button"class="btn btn-outline-grey" data-bs-dismiss="modal">취소</button>
                    <button type="submit" class="btn btn-data-add">저장</button>
                </div>
            </form>
        </div>
    </div>
</div>

$(document).on('dblclick', '#noticeTable tbody tr', function() {
    let selectRow = $(this);
    let noticeId = selectRow.find('td').eq(0).attr('id');
    let modalName ='';
    
    if (noticeId === '1') {
        modalName = 'dataAddModal';
    } else if (noticeId === '2') {
        modalName = 'dataAddModal2';
    }

    const modal = new bootstrap.Modal(document.getElementById(modalName));
    modal.show();
});

tr 요소를 더블 클릭 시 해당 row의 정보가 selectRow에 저장된다. 해당 row의 첫 번째 td 요소의 id 값을 찾아 noticeId에 저장한다. noticeId가 1이면 modalName에는 addAddModal1의 정보가, noticeId가 2이면 addAddModal2 정보가 저장된다.

해당되는 모달을 show 함수로 화면에 띄우게 된다.