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

前两天做了一个有关表单增删改查的例子,现在贴出来。主要是想好好说一下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.

时间: 2024-11-13 06:48:55

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

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

JavaScript HTML DOM增删改查

首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的:通过ID查找: <!DOCTYPE html> <html> <head> <title>learn javascript</title> </head> <body> <p id="demo"&g

yii2增删改查及AR的理解

yii2增删改查 // 返回 id 为 1 的客户 $customer = Customer::findOne(1); // 返回 id 为 1 且状态为 *active* 的客户 $customer = Customer::findOne([ 'id' => 1, 'status' => Customer::STATUS_ACTIVE, ]); // 返回id为1.2.3的一组客户 $customers = Customer::findAll([1, 2, 3]); // 返回所有状态为 &

javascript操作xml(增删改查)例子代码

包括了stu.hta(是HTML应用程序);      stu.xml 注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!! 文件stu.hta代码如下: 代码 <html><head><title> 数据岛的显示 </title><style type="text/css">#findPanel{ position:absolute; width:220px; bord

JavaScript数组:增删改查、排序等

直接上代码 // 数组应用 var peoples = ["Jack","Tom","William","Tod","Cart","Jhson"]; console.log('原始:'+'length('+ peoples.length +')==' + peoples); // push(元素),从尾部添加 peoples.push("Smith","Wo

Struts2增删改查(自己思路理解)

1:查询所有: DAO层:把所有的信息都放到list集合中.然后返回. public List<Employee> getEmployees(){ return new ArrayList<Employee>(emps.values()); } Action层:把所有的数据放到request的Map中.然后页面显示的时候.取request中的值 private Map<String, Object> request; public void setRequest(Map

springboot+jpa+thymeleaf增删改查的示例(转)

这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上手最好.在网上找相关资料的时候总是很麻烦,有的文章写的挺不错的但是没有源代码,有的有源代码但是文章介绍又不是很清楚,所在找资料的时候稍微有点费劲.因此在我学习Spring Boot的时候,会写一些最简单基本的示例项目,一方面方便其它朋友以最快的方式去了解,一方面如果我的项目需要用到相关技术的时候,直

springboot(十五):springboot+jpa+thymeleaf增删改查示例

这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上手最好.在网上找相关资料的时候总是很麻烦,有的文章写的挺不错的但是没有源代码,有的有源代码但是文章介绍又不是很清楚,所在找资料的时候稍微有点费劲.因此在我学习Spring Boot的时候,会写一些最简单基本的示例项目,一方面方便其它朋友以最快的方式去了解,一方面如果我的项目需要用到相关技术的时候,直

spring boot(十五)spring boot+thymeleaf+jpa增删改查示例

快速上手 配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.