使用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. 找出N个无序数中第K大的数

    使用类似快速排序,执行一次快速排序后,每次只选择一部分继续执行快速排序,直到找到第K个大元素为止,此时这个元素在数组位置后面的元素即所求 时间复杂度: 1.若随机选取枢纽,线性期望时间O(N) 2.若 ...

  2. Java热部署相关

    今天发现早年在大象笔记中写的一篇笔记,之前放在ijavaboy上的,现在它已经访问不了了.前几天又有同事在讨论这个问题.这里拿来分享一下. 在web应用开发或者游戏服务器开发的过程中,我们时时刻刻都在 ...

  3. 使用adb安装遇到的一些坑

    1.下载安装android SDK,可通过浏览器或者相关手机软件下载软件下载需要安装的apk安装文件,把apk文件放到android-sdk-windows\platform-tools下 2.可通过 ...

  4. vue 数据绑定 绑定属性 循环渲染数据

    <template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <h2>{ ...

  5. Type Cannot change version of project facet Dynamic Web Module to 2.5 报错

    项目下的.setings文件 夹中的 version 改为2.5

  6. Spring之Ioc原理

    ioc 控制反转 使用的 单例模式 和 工厂模式 单例模式保证创建对象的唯一性 工厂模式实现解耦合的作用 通过dm4j类似的技术读取xml文件中bean标签的属性值,id和class 利用反射技术和c ...

  7. 06-001 DependencyInjection 之 LifecycleKind

    IApplicationBuilder 里有如下一成员: IServiceProvider ApplicationServices { get; set; } HttpContext 里有如下两个成员 ...

  8. HBase常用操作命令

    HBase常用操作命令 1.进入HBase脚本客户端 #hbase shell #进入HBase脚本客户端 > whoami    #查看当前登录用户 > status           ...

  9. Android7.0对dlopen的改变——读取私有.so结果变化

    两个内存段 在同一个进程空间中dlopen一个.so文件,理论上在内存中是同一片区域,但实际调试中发现Android7.0(read "/proc/self/maps")中,先后读 ...

  10. ubuntu 16.04 配置静态ip 后默认的网卡eno1变成eth0了不能联网的问题解决

    我这次是在真实机器上面安装的ubuntu16.04 在配置了静态ip后不懂什么原因默认的eno1网卡变回了eth0网卡之后就不能上网, 同一个网段的其他集群节点也不能ping 通 因为ubuntu16 ...