您的位置: 首页  >  文章  >  jQuery实现表格的增加、修改、删除、保存。

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

分类: 文章 • 2023-03-25 21:10:06

 实现表格行数的增加以及修改表格内容。

1.文件列表

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

 

2.实现效果

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

 

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

<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">
                         <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>

 

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();//两者交集 
    });
});

 

 

相关推荐