用jQuery实现表格增加删除修改

原创

mob64ca12d80f3a 2024-06-30 05:51:36 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d80f3a的原创作品，请联系作者获取转载授权，否则将追究法律责任

用jQuery实现表格增加删除修改

一、流程步骤

journey
    title 教小白实现表格增加删除修改
    section 整体流程
        开始 --> 创建表格 --> 实现增加功能 --> 实现删除功能 --> 实现修改功能 --> 结束

1. 开始

首先，我们需要在HTML页面中引入jQuery库，以便使用jQuery的相关功能。

<script src="

2. 创建表格

在HTML中创建一个表格，用于展示数据，并添加相应的操作按钮。

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行将在后续步骤中添加 -->
    </tbody>
</table>
<button id="addRow">Add Row</button>

3. 实现增加功能

当点击“Add Row”按钮时，在表格末尾新增一行输入框，用于输入新数据。

$("#addRow").click(function() {
    $("#myTable tbody").append('<tr><td><input type="text" class="name"></td><td><input type="text" class="age"></td><td><button class="delete">Delete</button></td></tr>');
});

4. 实现删除功能

当点击某一行的“Delete”按钮时，删除该行数据。

$("#myTable").on("click", ".delete", function() {
    $(this).closest("tr").remove();
});

5. 实现修改功能

可以根据需要修改表格中的数据，例如修改姓名或年龄。

// 假设点击某一行后，可以修改该行数据
$("#myTable").on("click", "tr", function() {
    var name = $(this).find(".name").val();
    var age = $(this).find(".age").val();
    // 进行数据修改操作
});