使用jquery进行，文件的编写，实现自增id,删除，添加，编辑模式。

jquery放在本地，src="jquery_js.js" 可以改成其他，或者在线的路径

readme

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>弹出输入，增删改查</title>

    <script src="jquery_js.js"></script>

    <style>

        .under{

            height: 1000px;

            background-color: white;

        }

        .add{

            width: 100%;

            background-color: white;

            height:1000px;

            opacity: 0.8;      /*透明度的问题，加跟北京一样的颜色，覆盖掉最底部的颜色，然后调透明度。*/

            /*position: fixed;*/

            /*margin-top: 0px;*/

            top: 0px;

            position: fixed;

            z-index: 778;

        }

        .hide{

            display:none;

        }

        #f{

            position: fixed;

            top: 50%;

            left: 50%;

            z-index: 888;

            background-color: white;

            opacity: 1;

        }

        #f p{

        }

    </style>

</head>

<body>

<div class="under">

    <div class="z1"><button type="button">新增</button></div>

    <table border="1">

        <thead>

            <tr>

                <td>#</td>

                <td>姓名</td>

                <td>爱好</td>

                <td>操作</td>

            </tr>

        </thead>

        <tbody class="tbody">

            <tr class="test">

                <td class="fix">1</td>

                <td >周奕明</td>

                <td>play</td>

                <td><button class="edit" type="button">编辑</button>

               <button class="del">删除</button></td>

        </tbody>

    </table>

</div>

<div class="add hide">

    <form id="f" action="">

        <p>名字:<input type="text" value=""></p>

        <p>爱好:<input type="text" value=""></p>

        <!--<button class="put_up" style="margin-left:30px " type="button">提交</button>-->

        <button class="put_up" style="margin-left:30px " type="button" value="提交">提交</button>

        <button class="clear" style="margin-left: 20px" type="button">清空</button>

        <button class="quit" style="margin-left: 20px">退出</button>

    </form>

</div>

<script>

    <!--新增的函数-->

    $('.z1 button').click(function () {

        $('.add').removeClass('hide');

    })

//    提交的函数,新增

    $('.put_up').click(function () {

        var user_put = $($('.add input')[0]).prop('value')

        var hobby_put =  $($('.add input')[1]).prop('value')

        var arr=[];

            arr.push(user_put)

            arr.push(hobby_put)

         num2 = $('.tbody tr').length

        s= '<tr> <td class="fix">num</td> <td>user</td> <td>hobby</td> <td> <button class="edit" type="button">编辑</button> <button class="del">删除</button> </td></tr>'

        s= s.replace('num',num2+1)

        s= s.replace('user',user_put)

        s=s.replace('hobby',hobby_put)

        $('.add').addClass('hide')

        $('.tbody').append(s)

        edit()                //这时候由于绑定是在定义的时候发生的，所以需要重新执行一下

        del()

    })

//    清空的函数

    $('.clear').click(function () {

            $('.add input').prop('value','');

    })

//    退出的函数

    $('.quit').click(function () {

        $('.add').addClass('hide');

    })

//编辑

    function edit() {

     $('.edit').click(function () {

            console.log($('.edit'))

            console.log(this)

            fix = $('.fix')

            console.log($(this).parent().prevUntil(fix,'td'))  //!!fix是dom对象或者jquery对象，td是属性的标签，until不包含尾部

            temp = $(this).parent().prevUntil(fix,'td')

            temp.html('<input type="text">')

        })}

        edit()

//删除

    function del() {

        $('.del').click(function () {

            console.log($(this).parent().parent())

            console.log( $('.tbody'))

            $(this).parent().parent().remove()   //删除标签

//            $('.tbody').remove($(this).parent().parent())

//            $('tr').remove('$(this).parent().parent()');

//            console.log($(this).parent().parent())

            so_rt()

        })

    }

    function so_rt() {

        for (var k=0;k<$('.fix').length;k++){

            $($('.fix')[k]).text(k+1)   //双$$符的用途，因为取出的是一个组的形式，拿出的是dom对象，然后在jquery

            console.log('start_sort')

        }

    }

//        del()

</script>

</body>

</html>

<!--比较麻烦的点在于，1.添加的时候的自增id的问题，2.添加的时候，将你想要添加的节点做成模版的状态，之后在向里面传值，3.设置隐藏之类的属性的时候，

先定义一个类，在script内写命令，将这个类添加到想获得这个属性的classlist中，4,在改的时候，将元素类型切换，变成input形式-->

<!--在进行自增id功能的实现的时候，开始构想的是查找#标签的数量,然后添加的时候进行+1操作，但是在进行删除操作的时候，一旦删除中间的那个，之后添加会出现相同id的情况-->

<!--想法一：在添加操作中，for循环剔除重复的id，然后进行重新排序.这种id可以不变，这种（暂时没有搞）-->

<!--想法二：直接将序号列，重新排序，在删除，添加操作之后.这种id变化。#

jquery实现增删改（伪）-老男孩作业day13的更多相关文章

  1. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查

    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...

  2. jQuery动态增删改查表格信息，可左键/右键提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法

    .next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...

  4. 第三课作业——set类型、sorted set类型的增删改查，redis的事务

    第三课时作业 静哥 by 2016.2.23~2016.3.6   [作业描述] 1.总结什么是set以及什么是sorted set,并完成对set以及sorted set的增删改查(查需要至少4种方 ...

  5. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  6. jQuery调用WebService实现增删改查的实现

    第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...

  7. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  8. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  9. python全栈开发中级班全程笔记（第二模块、第三章）（员工信息增删改查作业讲解）

    python全栈开发中级班全程笔记 第三章:员工信息增删改查作业代码 作业要求: 员工增删改查表用代码实现一个简单的员工信息增删改查表需求: 1.支持模糊查询,(1.find name ,age fo ...

随机推荐

  1. Linux搭建Node.js环境

    1,安装Node.js curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash sudo yum -y in ...

  2. 简单的一个MySQL类的实现：

    '''定义MySQL类:1.对象有id.host.port三个属性2.定义工具create_id,在实例化时为每个对象随机生成id,保证id唯一3.提供两种实例化方式,方式一:用户传入host和por ...

  3. [UE4]裁剪 Clipping

    Clipping裁剪,是每个UI都有的属性.一般是在容器UI上设置,对容器内的UI进行裁剪. 一.Clip to Bounds:裁剪到边界 二.Clip To Bounds - Without Int ...

  4. [UE4]纯函数的执行时机

    一.纯函数是在需要的时候被调用 二.纯函数内不应当修改任何数据 三.如果同一个函数需要多个得到多个纯函数的返回值,则多个纯函数的调用顺序不是固定的,并且一个纯函数的调用顺序也不应当影响下一个纯函数的返 ...

  5. uigrid配置详解(1)

    $scope.gridOptions.rowTemplate = '<div style="background-color: aquamarine" ng-click=&q ...

  6. 手动向Maven本地仓库添加ORACLE jdbc驱动

    一,当在maven工程中我们需要连接数据库的时候,只需要配置它的依赖就行,但是Maven不提供Oracle JDBC driver,由于Oracle授权问题它并没有提供,需要自己手动添加. 二,获取连 ...

  7. github----awesome-typescript-projects

    https://github.com/brookshi/awesome-typescript-projects

  8. 数据迁移_把RAC环境备份的数据，恢复到另一台单机Oracle本地文件系统下

    数据迁移_把RAC环境备份的数据,恢复到另一台单机Oracle本地文件系统下 作者:Eric 微信:loveoracle11g 1.创建pfile文件 # su - ora11g # cd $ORAC ...

  9. vue-生存周期

    beforeCreate   实例初始化之后 created           实例创建之后 beforeMount   实例挂载前    文本节点 mounted        渲染实例 防止花括 ...

  10. servlet和jsp概述

    1.servlet的作用 B/S系统:浏览器/服务器(Servlet的服务模式) Servlet是运行在web服务器或应用服务器上的java程序,它是一个中间层,负责连接来自web浏览器或其它HTTP ...