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 ...
随机推荐
- 2.C++语言特性
一.普遍编程语言的特征 任何常用的编程语言都具备一组公共的语法特征,不同的语言仅在特征的细节上有所区别.所以,要想掌握一门语言,需要理解其语法特征的实现细节是第一步. 最基本的特征包括: ...
- 学习笔记之Python全栈开发/人工智能公开课_腾讯课堂
Python全栈开发/人工智能公开课_腾讯课堂 https://ke.qq.com/course/190378 https://github.com/haoran119/ke.qq.com.pytho ...
- Linux下的文件操作——基于文件描述符的文件操作(2)
文件描述符的复制 MMAP文件映射 ftruncate修改文件大小 文件描述符的复制 系统调用函数dup和dup2可以实现文件描述符的复制,经常用来重定向进程的stdin(0), stdout(1 ...
- [UE4]一个好用的虚幻4插件，根据资源名称动态加载资源,GetCurrentLeveName（获得当前地图名称）
下载地址 一.下载与UE4相对应的版本 二.在工程根目录新建Plugins目录,解压插件. 三.如果工程已经打开,则需要重新打开 四.重新打开工程后,右下角会有提示有新插件可用. 五.这个插件提供 ...
- [UE4]RepNotify，更新通知
“复制”: 1.Replicated:复制更新 2.RepNotify:更新通知.选择这个选项,会自动生成一个通知函数(如上图所示的“OnRep_Health”),当这个变量的值有变化的时候,这个函数 ...
- [UE4]AWP组合
AWP狙击枪可以由主枪和镜头模型组合而成. 一.主枪 二.镜头组合
- [UE4]需要保存的数据
数据存储原则是“相关的放在一起,不相关的分开”. 如果存档有几十上百兆,如果放在一起存储容易出现问题(特别是网络游戏):断线.电脑死机.游戏出错等等,存档就会损坏,所以一定要分割存储.
- Java注解的基本概念和原理及其简单实用
一.注解的基本概念和原理及其简单实用 注解(Annotation)提供了一种安全的类似注释的机制,为我们在代码中添加信息提供了一种形式化得方法,使我们可以在稍后某个时刻方便的使用这些数据(通过解析 ...
- ViewPager系列之 仿魅族应用的广告BannerView
转自:https://juejin.im/post/5933c65d0ce463005717cbe9 前言 Banner广告位是APP 中的一个非常重要的位置,为什么呢?因为它能带来money.是一个 ...
- Linux mysql 5.7.23 主从复制（异步复制）
docker容器主节点: 172.17.0.9 docker容器子节点: 172.17.0.10 异步复制: 首先确认主库和从库是否一致,最好都是刚刚初始化的干净的数据库 如果主库正在使用不能初始化 ...