jQuery實作在表格中插入新行的步驟詳解-js教程-PHP中文網

jQuery實作在表格中插入新行的步驟詳解

WBOY

發布： 2024-02-29 08:48:03

原創

760 人瀏覽過

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>