jQuery实现表格的增加、修改、删除、保存。

前端学习 专栏收录该内容
4 篇文章 1 订阅

 实现表格行数的增加以及修改表格内容,同时表格行数可自由拖动(引用了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

 

  • 5
    点赞
  • 0
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值