jquery实现增删改（伪）-老男孩作业day13
使用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的更多相关文章
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- jQuery动态增删改查表格信息，可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
- 第三课作业——set类型、sorted set类型的增删改查，redis的事务
第三课时作业 静哥 by 2016.2.23~2016.3.6 [作业描述] 1.总结什么是set以及什么是sorted set,并完成对set以及sorted set的增删改查(查需要至少4种方 ...
- 使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...
- jQuery调用WebService实现增删改查的实现
第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- python全栈开发中级班全程笔记（第二模块、第三章）（员工信息增删改查作业讲解）
python全栈开发中级班全程笔记 第三章:员工信息增删改查作业代码 作业要求: 员工增删改查表用代码实现一个简单的员工信息增删改查表需求: 1.支持模糊查询,(1.find name ,age fo ...
随机推荐
- shell文件描述符和重定向
1.文件描述符是与一个打开的文件或数据流相关联的整数.文件描述符0,1,2是系统预留的. 0 --------stdin(标准输入) 1 --------stdout(标准输出) 2--------- ...
- scala 基本类型和操作
Scala基本类型 Scala中的基本数据类型如下图: (来源:Programming in scala) 从上表中可以看出,Scala的基本数据类型与Java中的基本数据类型是一一对应的,不同的是 ...
- 廖雪峰Java4反射与泛型-3范型-3编写泛型
编写泛型类比普通的类要麻烦,而且很少编写泛型类. 1.编写一个泛型类: 按照某种类型(例如String)编写类 标记所有的特定类型例如String 把特定类型替换为T,并申明 Pair.java pa ...
- centos7.0KVM虚拟化
需要在图形化界面完成实验 查看CPU信息 # cat /proc/cpuinfo centos7默认安装的虚拟化包 # yum list open*tools 如果没安装就安装 #yum instal ...
- Zabbix系统中的历史数据和趋势数据
原文:http://blog.chinaunix.net/uid-9411004-id-4139807.html 或许读者还记得,我们在介绍如何创建一个监控项目时,我们介绍过在“配置项目”表单页面上有 ...
- python之路——2
王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1.编译型:一次性将全部的代码编译成二进制文件 c c++ 优点:运行效率高 缺点:开发速度慢,不能跨 ...
- Java开发各层对象专用名词含义 PO,VO,DAO,BO,DTO,POJO, BYO,Entity,JavaBean,JavaBeans
Java的几种名词(PO,VO,DAO,BO,POJO)解释 PO:persistant object 持久对象.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一 ...
- java中序列化的简单认识
一.什么是序列化 Java平台允许我们在内存中创建可复用的Java对象,但一般情况下,只有当JVM处于运行时,这些对象才可能存在,即,这些对象的生命周期不会比JVM的生命周期更长.但在现实应用中,就可 ...
- supervisor管理hive metastore和hive server2进程
1. hive_metastore.ini [program:hive_metastore] environment = JAVA_HOME=/usr/java/jdk1..0_172-amd64,H ...
- Css实战第二天小结
清除浮动的四种方式: 1.1 给父盒子设置一个高度: 1.2 Clear:both; 1.3 Overflow:hidden; 1.4 使用伪元素 .clearfix:befo ...