Table拖拽行重新排序并实现行内编辑

一个猴子请来的救兵

已于 2022-07-13 10:46:32 修改

阅读量377

点赞数

分类专栏： Table 前端文章标签： jquery javascript 前端

于 2022-07-13 10:45:23 首次发布

本文链接：https://blog.csdn.net/sinat_28505133/article/details/125758957

版权

Table拖拽行重新排序并实现行内编辑

代码

<!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>  
  
  <!-- reorder -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

</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="name" required="">  
    </div>  
      
    <div class="form-group">  
      <label>Email:</label>  
      <input type="text" name="email" class="form-control" value="email" required="">  
    </div>  
     
    <button type="submit" class="btn btn-success save-btn">Save</button>  
      
  </form>  
  <br/>  
  <table class="table table-bordered data-table" id="table">  
    <thead>  
      <th>Name</th>  
      <th>Email</th>  
      <th width="200px">Action</th>  
    <