jQuery를 사용하여 테이블에 새 행을 삽입하는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery를 사용하여 테이블에 새 행을 삽입하는 단계에 대한 자세한 설명

WBOY

풀어 주다： 2024-02-29 08:48:03

원래의

714명이 탐색했습니다.

jQuery를 사용하여 테이블에 새 행을 삽입하는 단계에 대한 자세한 설명

웹 개발에서 jQuery를 사용하면 DOM 요소를 쉽게 조작하고 페이지에서 대화형 효과를 얻을 수 있습니다. 테이블에 새 행을 삽입하는 것은 일반적인 요구 사항입니다. 이 기사에서는 jQuery를 사용하여 이 기능을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. jQuery 라이브러리 소개

jQuery를 사용하기 전에 먼저 웹 페이지에 jQuery 라이브러리를 소개해야 합니다. CDN을 통해 가져올 수도 있고, jQuery 라이브러리를 로컬로 다운로드한 후 가져올 수도 있습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

로그인 후 복사

2. HTML 테이블 구조 작성

페이지에 간단한 테이블 구조를 작성하여 테이블에 새 행을 삽입하는 효과를 보여줍니다.

<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
<button id="addRow">添加新行</button>

로그인 후 복사

3. jQuery를 사용하여 새 행 삽입

다음으로 버튼을 클릭한 후 jQuery를 사용하여 테이블에 새 행을 삽입하는 기능을 구현합니다.

$(document).ready(function() {
    $('#addRow').click(function() {
        $('#myTable tbody').append(`
            <tr>
                <td>王五</td>
                <td>28</td>
            </tr>
        `);
    });
});

로그인 후 복사

위 코드에서는 먼저 $(document).ready()来确保页面加载完成后再执行代码。接着，通过$('#addRow').click()来监听按钮点击事件，当按钮被点击时执行相应的操作。在点击事件的处理函数中，使用$('#myTable tbody').append()를 사용하여 테이블의 tbody에 새 행을 추가합니다.

4. 코드 통합

위의 단계를 바탕으로 jQuery 라이브러리를 도입하는 코드, 테이블 구조의 HTML 코드 및 새 줄을 삽입하는 JavaScript 코드를 통합합니다.




    
    
    
    插入新行示例
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



    
        
            
                姓名
                年龄
            
        
        
            
                张三
                25
            
            
                李四
                30
            
        
    
    
    
    <script>
        $(document).ready(function() {
            $('#addRow').click(function() {
                $('#myTable tbody').append(`
                    <tr>
                        <td>王五</td>
                        <td>28</td>
                    </tr>
                `);
            });
        });
    </script>