javascript相关的增删改查以及this的理解

Posted 2020-10-07 wamm521

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

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

 

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

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

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

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

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

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

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

html代码：

<table class="one">
     <tr>
          <td style="width:100%">
                 <a href="" class="sbtn add addone" data-toggle="modal" data-target="#myadd" >增加</a>
                   </td>
       </tr>
</table>
<table class="tabb two">

     <tbody>
          <tr>

               <td>险别</td>
               <td>损失标的</td>
               <td>定损金额</td>
               <td>备注</td>
               <td>操作</td>
　　　　　　</tr>
          <tr class="trsec">
                 <td><select name="" id=""><option value="111" readonly="readonly">111</option><option value="222" readonly="readonly">222</option></select></td>
                 <td><select name="" id="" disabled="disabled"><option value="" >损失标的一</option>
                                    <option value="">损失标的二</option></select></td>
                 <td><input type="text" readonly="readonly" value="111"/><span></span></td>
                 <td><input type="text" readonly="true" class="ccc" value="222"/></td>
                  <td>
                     <a href="javascript:;" class="sbtn save">保存</a><a href="javascript:;" class="sbtn edit">编辑</a><a class="sbtn delete deleteone" data-toggle="modal" data-target=".mydelete">删除</a>
                  </td>
          </tr>

   </tbody>
</table>

<!-- 这里是删除的弹框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=\'<tr class="trsec">\'+
            \'<td><select name="" id=""><option value="">111</option></select></td>\'+
            \'<td><select name="" id=""><option value="">损失标的一</option><option value="">损失标的二</option></select></td>\'+
            \'<td><input type="text" /></td>\'+
            \'<td><input type="text" /></td>\'+
            \'<td><a class="sbtn save">保存</a><a  class="sbtn edit" >编辑</a><a class="sbtn delete deleteone" data-toggle="modal" data-target=".mydelete"><span class="icon-delete"></span>删除</a></td>\'+
            \'</tr>\';

        $(".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.