list for a javascript modal

Remark : 각 리스트에 내용이 다른 모달 생성


<!DOCTYPE html>
<html>
  
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
</head>
  
<body>
  
<!-- Button trigger modal -->
    <ul>
        <li data-toggle="modal" 
            data-target="#exampleModal" 
            data-whatever="Item 1">
            <a href="#">Item 1</a>
        </li>
        <li data-toggle="modal" 
            data-target="#exampleModal" 
            data-whatever="item 2">
            <a href="#">Item 2</a>
        </li>
        <li data-toggle="modal" 
            data-target="#exampleModal" 
            data-whatever="item 3">
            <a href="#">Item 3</a>
        </li>
    </ul>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" 
        tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                        Modal title
                    </h5>
                    <button type="button" class="close" 
                        data-dismiss="modal" 
                        aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p> hi</p>
                </div>
                <div class="modal-footer">
                    <button type="button" 
                        class="btn btn-secondary" 
                        data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#exampleModal').on('show.bs.modal', 
        function (event) {
  
            // Button that triggered the modal
            var li = $(event.relatedTarget)
  
            // Extract info from data attributes 
            var recipient = li.data('whatever')
              
            // Updating the modal content using 
            // jQuery query selectors
            var modal = $(this)
  
            modal.find('.modal-title')
                .text('New message to ' + recipient)
                  
            modal.find('.modal-body p')
                .text('Welcome to ' + recipient)
        })
    </script>
</body>
  
</html>

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</script>

</head>

<body>

<ul>

<li data-toggle="modal"

data-target="#exampleModal"

data-whatever="Item 1">

</li>

<li data-toggle="modal"

data-target="#exampleModal"

data-whatever="item 2">

</li>

<li data-toggle="modal"

data-target="#exampleModal"

data-whatever="item 3">

</li>

</ul>

<div class="modal fade" id="exampleModal"

tabindex="-1" role="dialog"

aria-labelledby="exampleModalLabel"

aria-hidden="true">

<h5 class="modal-title"

id="exampleModalLabel">

Modal title

</h5>

<button type="button" class="close"

data-dismiss="modal"

aria-label="Close">

</button>

</div>

</div>

<button type="button"

class="btn btn-secondary"

data-dismiss="modal">

</button>

</div>

$('#exampleModal').on('show.bs.modal',

function (event) {

// Button that triggered the modal

var li = $(event.relatedTarget)

// Extract info from data attributes

var recipient = li.data('whatever')

// Updating the modal content using

// jQuery query selectors

var modal = $(this)

modal.find('.modal-title')

.text('New message to ' + recipient)

modal.find('.modal-body p')

.text('Welcome to ' + recipient)

})

</script>

</body>

</html>


modal.find('.table').find("tr:eq(0)").find("td:nth-child(1)")  //Table td 찾기
                .html(departuredate + 'OK')


tr:eq(0) : 0 부터 시작
td:nth-child(1) : non th 라서  1 부터 시작


 .text(departuredate + 'OK')  : 변수 소문자로만 가능 
 .html(departuredate + 'OK')  : 테그가 있을시 html 으로

modal.find('.table').find("tr:eq(0)").find("td:nth-child(1)") //Table td 찾기

.html(departuredate + 'OK')

tr:eq(0) : 0 부터 시작

td:nth-child(1) : non th 라서 1 부터 시작

.text(departuredate + 'OK') : 변수 소문자로만 가능

.html(departuredate + 'OK') : 테그가 있을시 html 으로