前两天做了一个有关表单增删改查的例子，现在贴出来。主要是想好好说一下this。

下面贴一张我要做的表格效果。

 

就是实现简单的一个增删改查。

1、点击增加后自动增加一行；

2、点击保存当前行会将属性改成只读属性；

3、点击编辑会自动编辑，input的属性会变成可读可写属性；

4、点击删除会出现弹框，确定该条是否会删除。

下面贴出代码，不要很激动哦，哈哈！

提前说一下，代码是基于jquery以及bootstrap的，以下有用到该框架的js以及css

HTML代码：

     
                 增加                   
     
　　　　　　
           
                 
                       
险别
                       
损失标的
                       
定损金额
                       
备注
                       
操作
       
                 
                         
111222
                         
损失标的一                                    损失标的二
                         
                         
                          
                     保存编辑删除                  
                 
         
     

<!-- 这里是删除的弹框Modal -->

<div class="modal fade mydelete" tabindex="-1" role="dialog" >

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

</div>

<div class="modal-body">

确定要删除吗？

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default sure" data-dismiss="modal">确定</button>

<button type="button" class="btn btn-primary cancel" data-dismiss="modal">取消</button>

</div>

</div>

</div>

</div>

　下面插入js代码：

function save(){        //点击保存按钮进行编辑        $(".save").on("click",function(){            //alert(222);            //debugger            $(this).parents(".trsec").find("input,select").css("border","1px solid #fff");            $(this).parents(".trsec").find("input,select").attr("readonly",true);            $(this).parents(".trsec").find("select").attr("disabled",true);        });    };    save();    function edit(){        //点击编辑按钮进行编辑        $(".edit").on("click",function(){            //debugger            //alert(111);            $(this).parents(".trsec").find("input,select").css("border","1px solid #ccc");            $(this).parents(".trsec").find("input").attr("readonly",false);            $(this).parents(".trsec").find("select").attr("disabled",false);        });    };    edit();    //点击删除按钮出现弹框    function deletea(){        $(".deleteone").on("click",function(){            var _this = $(this);            $(".sure").on("click",function(){                // alert(2222);                // $(".mydelete").modal("hide");                _this.parents(".trsec").remove();            });            $(".cancel").on("click",function(){                $(".mydelete").modal("hide");            })        });    }    deletea();    //定损信息点击增加按钮的样式    $(".addone").on("click",function(){        var str=''+            '111'+            '损失标的一损失标的二'+            ''+            ''+            '保存编辑删除'+            '';        $(".two tbody").append(str);        //console.log(document.getElementsByClassName("edit"));        edit();        //点击保存按钮进行编辑        save();        deletea();    });

 

　这里我想重点说的是两个问题.

一:删除这块，this的问题，on（）事件委派

//点击删除按钮出现弹框    function deletea(){        $(".deleteone").on("click",function(){            var _this = $(this);            $(".sure").on("click",function(){                _this.parents(".trsec").remove(); }); $(".cancel").on("click",function(){ $(".mydelete").modal("hide"); }) }); }

 _this此时指的就是当前的deleteone，。sure的点击的时候，这里的_this 指的就是当前的那个.deleteone.