jQuery实现在表格中插入新行的步骤详解

原创

ithorizon 4周前 (10-19) 阅读数 40 #Javascript

在网页开发中，使用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>