jQuery 11.종합 응용 예시

게시판 만들기 

게시판 리스트📋

글번호	제목	작성자	조회수	작성일
3	세번째 글제목	user01	23	2022-12-25
2	두번째 글제목	user02	15	2022-12-15
1	첫번째 글제목	admin	215	2022-11-30

선택된 게시글 정보 : 글번호/ 제목/ 작성자/ 조회수/ 작성일

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        tbody>tr:hover{
            cursor:pointer;       
        }


    </style>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

 

 

 <h2>게시판 리스트📋</h2>
    <table class="table table-hover">
        <thead class="thead-dark">
            <tr>
                <th>글번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>조회수</th>
                <th>작성일</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>3</td>
                <td>세번째 글제목</td>
                <td>user01</td>
                <td>23</td>
                <td>2022-12-25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>두번째 글제목</td>
                <td>user02</td>
                <td>15</td>
                <td>2022-12-15</td>
            </tr>
            <tr>
                <td>1</td>
                <td>첫번째 글제목</td>
                <td>admin</td>
                <td>215</td>
                <td>2022-11-30</td>
            </tr>
        </tbody>
    </table>

    <br><br>
    선택된 게시글 정보 : 
    <span id="s0">글번호</span>/
    <span id="s1">제목</span>/
    <span id="s2">작성자</span>/
    <span id="s3">조회수</span>/
    <span id="s4">작성일</span>

 

    <script>
        $(function(){ //📌중요 
            $("tbody>tr").click(function(){
                // console.log($(this).children().eq(0).text());
                // console.log($(this).children().eq(1).text());
                // console.log($(this).children().eq(2).text());

                //[td,td,td, ..]
                $(this).children().each(function(index, el){
                    // index : 순차적으로 접근되는 인덱스 수 
                    // el : 순차적으로 접근되는 요소객체(td) => 자바스크립트 방식
                    console.log($(el).text());

                    $("#s" + index).text($(el).text());

                })
            })
        })
    </script>