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

 实现表格行数的增加以及修改表格内容，同时表格行数可自由拖动（引用了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,只有中间的表格需要进行编写，其余部分只占个空位。

    
    
    
    
    
	
    


    

        
        

             
        
        
        

            

            
            
            

                 

                     
                     
用户表
                     
                     

                         
用户名
                         
密码
                         
操作
                     
                     
                     

                         

                            
张三
                            
123
                            
【保存】
                                【删除】
                                【修改】
                            
                         
                     
                     
                     

                            

                                
账号:
                                
密码:
                                

                                

                             
                     
                 
            
            


            
        
        
        


        
    

---

 

5.jQuery

$(document).ready(function(){
    //增加，得到增加按钮的点击
    $("#btn_add").click(function(){
        var account=$("#account").val();//得到input值
        var password=$("#password").val();
        var tr = "" + account + "" + password+
        "【保存】【删除】【修改】";
        //插入的行
        $("#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 = ""; //值为之前的值
            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!!!!!!!!