在 JQuery 中添加编辑删除表行

17 Mar 2025 | 阅读 2 分钟

在本节中，我们将学习表格行的编辑、删除和添加。我们将使用 JQuery 来完成此操作。在我们下面的示例中，我们将使用 JQuery 添加、编辑和删除表格行。假设我们对如何将 JQuery 与添加、编辑和删除功能结合使用一无所知。在这种情况下，下面的示例将通过 JQuery 提供一种方法，通过该方法我们可以轻松地执行各种操作，如添加、编辑和删除。我们还将使用 Bootstrap，它将帮助我们提供一个非常有吸引力的布局。

为了实现这一点，我们将创建一个 html 文件。之后，我们将添加 Bootstrap 以获得更好的外观，然后我们将添加 JQuery 文件。现在，我们将通过编写以下代码在 JQuery 中创建一个新的表格行。我们还将编写 JQuery 代码来编辑和删除行数据。执行此操作的示例描述如下：

示例

<!DOCTYPE html>
<html>
<head>
  <title> Use of JQuery to Add Edit Delete Table Row </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    
<div class="container">
  <h1> Use of JQuery to Add Edit Delete Table Row </h1>
    
  <form>
        
    <div class="form-group">
      <label>Name:</label>
      <input type="text" name="name" class="form-control" value="Smith" required="">
    </div>
    
    <div class="form-group">
      <label>Email:</label>
      <input type="text" name="email" class="form-control" value="smith@abc.com" required="">
    </div>
   
    <button type="submit" class="btn btn-success save-btn">Save</button>
    
  </form>
  <br/>
  <table class="table table-bordered data-table">
    <thead>
      <th>Name</th>
      <th>Email</th>
      <th width="200px">Action</th>
    </thead>
    <tbody>
    
    </tbody>
  </table>
   
</div>
   
<script type="text/javascript">
   
    $("form").submit(function(e){
        e.preventDefault();
        var name = $("input[name='name']").val();
        var email = $("input[name='email']").val();
     
        $(".data-table tbody").append("<tr data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
    
        $("input[name='name']").val('');
        $("input[name='email']").val('');
    });
   
    $("body").on("click", ".btn-delete", function(){
        $(this).parents("tr").remove();
    });
    
    $("body").on("click", ".btn-edit", function(){
        var name = $(this).parents("tr").attr('data-name');
        var email = $(this).parents("tr").attr('data-email');
    
        $(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');
        $(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');
    
        $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")
        $(this).hide();
    });
   
    $("body").on("click", ".btn-cancel", function(){
        var name = $(this).parents("tr").attr('data-name');
        var email = $(this).parents("tr").attr('data-email');
    
        $(this).parents("tr").find("td:eq(0)").text(name);
        $(this).parents("tr").find("td:eq(1)").text(email);
   
        $(this).parents("tr").find(".btn-edit").show();
        $(this).parents("tr").find(".btn-update").remove();
        $(this).parents("tr").find(".btn-cancel").remove();
    });
   
    $("body").on("click", ".btn-update", function(){
        var name = $(this).parents("tr").find("input[name='edit_name']").val();
        var email = $(this).parents("tr").find("input[name='edit_email']").val();
    
        $(this).parents("tr").find("td:eq(0)").text(name);
        $(this).parents("tr").find("td:eq(1)").text(email);
     
        $(this).parents("tr").attr('data-name', name);
        $(this).parents("tr").attr('data-email', email);
    
        $(this).parents("tr").find(".btn-edit").show();
        $(this).parents("tr").find(".btn-cancel").remove();
        $(this).parents("tr").find(".btn-update").remove();
    });
    
</script>
     
</body>
</html>

现在我们上面的代码已准备好运行。当我们运行它时，将生成以下输出

下一主题使用 jQuery 和 Bootstrap 动态添加和删除输入字段

在 JQuery 中添加编辑删除表行

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

在 JQuery 中添加编辑删除表行

相关帖子

使用 HTML、CSS 和 jQuery 的 QR 码生成器

使用 jQuery 的前后滑块

jQuery 年龄验证插件

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

jQuery Excel 导出插件库

使用 jQuery 的阅读更多功能

条形码 jQuery 示例

jQuery 推送通知插件

jQuery 获取两个日期之间的天数差

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器