前兩天做了一個有關表單增刪改查的例子，現在貼出來。主要是想好好說一下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.

javascript相關的增刪改查以及this的理解