jQuery实现表格的增加、修改、删除、保存。_jq前端table 动态编辑保存-CSDN博客

本文链接：https://blog.csdn.net/afghzstsezhgszs/article/details/84959478

本文介绍了一种使用jQuery和jQuery UI插件实现的动态表格功能，支持表格行数的自由增加、删除及内容修改，并且表格行可拖动排序。通过简单的HTML结构与CSS布局，配合jQuery的事件监听，实现了用户友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现表格行数的增加以及修改表格内容，同时表格行数可自由拖动（引用了jquery-ui插件）。

1.文件列表

2.实现效果

3.css

实现一个标准的窗体划分，把整个界面分成上下中三部分，然后把中间再分为三块。


.all/*全屏，高度不可为百分比，设置左浮动（全体），颜色区分不同块*/
{
    width:100%;
    height:700px;
    float:left;
}
.all .header{/*标题栏，上部*/
    width:100%;
    height: 20%;
    background-color: beige;
    float:left;
}
.all .v_center{/* 中间的爸爸，中部*/
    width:100%;
    height:60%;
    float:left;
}
.all .v_center .left{/*左边（中）*/
    width: 25%;
    height: 100%;
    background-color: aquamarine;
    float:left;
}
.all .v_center .h_center{/*中间（中）*/
    width: 50%;
    height: 100%;
    background-color: yellow;
    float:left;
    overflow:auto;
}

.all .v_center .right{/*右边（中）*/
    width: 25%;
    height: 100%;
    background-color: cyan;
    float:left;
}
.all .tail{/*尾部*/
   width:100%;
   height: 20%;
   background-color: darkkhaki;
   float:left;
}

4.html

一个简单的html,只有中间的表格需要进行编写，其余部分只占个空位。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Table Uses</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css"  href="css/mycss.css" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/myjs.js"></script>
</head>
<body>
    <div class="all">
        <!--头部-->
        <div class="header">
             
        </div>
        <!--中部-->
        <div class="v_center">
            <div class="left">
            
            </div>
            <div class="h_center" align="center">
                 <table border="1" cellpadding="5" class="table_body">
                     <!--标题-->
                     <caption>用户表</caption>
                     <!--表头-->
                     <thead>
                         <th>用户名</th>
                         <th>密码</th>
                         <th colspan="2">操作</th>
                     </thead>
                     <!--表的主体-->
                     <tbody id="t_body" class="sortable">
                         <tr>
                            <td align="center">张三</td>
                            <td align="center">123</td>
                            <td  colspan="2" align="center"><a href="#" class="save1" style="display:none">【保存】</a>
                                <a href='#' class='delete1'>【删除】</a>
                                <a href='#' class='update1'>【修改】</a>
                            </td>
                         </tr>
                     </tbody>
                     <!--表的尾部-->
                     <tfoot>
                            <tr>
                                <td>账号:<input type="text" id="account"/></td>
                                <td>密码:<input type="text" id="password"/></td>
                                <td align="center"><input type="button" id="btn_add" value="添加用户"/></td>
                                <td align="center"><input type="button" id="btn_delete" value="删除所有"/></td>
                             </tr>
                     </tfoot>
                 </table>
            </div>
            <div class="right">

            </div>
        </div>
        <!--尾部-->
        <div class="tail">

        </div>
    </div>
</body>
</html>

5.jQuery

$(document).ready(function(){
    //增加，得到增加按钮的点击
    $("#btn_add").click(function(){
        var account=$("#account").val();//得到input值
        var password=$("#password").val();
        var tr = "<tr><td  align='center'>" + account + "</td><td  align='center'>" + password+
        "</td><td align='center' colspan='2'><a href='#' class='save1' style='display:none'>【保存】</a><a href='#' class='delete1'>【删除】</a><a href='#' class='update1'>【修改】</a></td></tr>";
        //插入的行
        $("#t_body").append(tr);//被选元素的结尾插入
        $("#account").val("");
        $("#password").val("");
    });
    //删除所有
    $("#btn_delete").click(function(){
        $("#t_body").empty();//表格主体为空
    });
    //删除
    $('#t_body').on('click', ".delete1", function () {
       //on(event（事件）,childSelector（指定的子元素）,function(函数))
       $(this).closest('tr').remove();//closest()选中的（前）第一个为（tr）的祖先元素
    });
     //修改
    $('#t_body').on('click', ".update1", function () {
       var tr = $(this).parent().parent(); //选中的他爷爷
       $(this).closest("td").siblings("td:not('a')").each(function(i,el){
           //选中点击的的第一个祖先td的同辈元素并且是没有a标签的,each(function(index(下标),element(当前的元素)))--遍历
            el = $(el);//得到元素 
            var html = "<input value='"+el.text()+"' type='text'>"; //值为之前的值
            el.html(html);//元素变为html内容
       });
        $(".update1",tr).hide(); //两者交集
        $(".save1",tr).show(); //两者交集
    });
    //保存
    $('#t_body').on('click', ".save1", function () {
        var tr = $(this).parent().parent();//选中的他爷爷 
        $("input[type='text']",tr).each(function(i,el){ //选取当前选中的input值对应的（输入框）
            el = $(el); //得到元素
            el.parent().text(el.val());//元素父辈元素的值 
            el.remove(); 
        }); 
       $(".save1",tr).hide(); //两者交集
       $(".update1",tr).show();//两者交集 
    });
    $(".sortable").sortable({
        cursor: "move",
        items: "tr", //只是tr可以拖动
        opacity: 0.6, //拖动时，透明度为0.6
        revert: true, //释放时，增加动画
        update: function(event, ui) { //更新排序之后
            var categoryids = $(this).sortable("toArray");
            var $this = $(this);
        }
    });
    $(".sortable").disableSelection();
});

okk!!!!!!!! 资源下载——>https://download.csdn.net/download/afghzstsezhgszs/13985492