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 ...
随机推荐
- JAVA代码模板总结
静态工厂方法+服务提供者框架模板 构造器模板 事件通知模板 单元素枚举类型singleton模块 私有构造器不可实例化类模板
- [UE4]迁移小地图到其他工程
一.创建一个新工程,类型不限,本次测试场创建的是赛车类工程. 二.为了方便管理,最好在All文件文件夹下新建一个名为MiniMap的目录,并把所有小地图相关的都放进来. 三.在小地图工程中,右键Rou ...
- Java IO网络编程经典模板
本文会从传统的BIO到NIO再到AIO自浅至深介绍,并附上完整的代码讲解. 下面代码中会使用这样一个例子:客户端发送一段算式的字符串到服务器,服务器计算后返回结果到客户端. 代码的所有说明,都直接作为 ...
- CLion使用OpenCV(Ubuntu 18.04)
项目结构: 设置CMainLists.txt文件中的内容: cmake_minimum_required(VERSION 3.13) project(cv_test) ) find_package(O ...
- Chapter1：Qt概念
信号和槽1.信号与槽机制的连接方式(1):一个信号可以与另一个信号相连,代码如下: connect(Object1,SIGNAL(signal1),Object2,SIGNAL(signal1)); ...
- Java动手及实验整理
1 枚举类型 在Java中,枚举类型本质上其实就是一个类,枚举中的常量都是该枚举类型的实例.枚举类型是引用类型!枚举不属于原始数据类型,它的每个具体值都引用一个特定的对象.相同的值则引用同一个对象 ...
- Solr游标查询提高翻页效率
长期以来,我们一直有一个深分页问题.如果直接跳到很靠后的页数,查询速度会比较慢.这是因为Solr的需要为查询从开始遍历所有数据.直到Solr的4.7这个问题一直没有一个很好的解决方案.与最近发布的So ...
- async 常用函数总结
待更新. waterfall auto(神器) parallel mapSeries(数据库多条记录操作神器)
- WPF Stake
WPF中的StackPanel.WrapPanel.DockPanel 转:http://blog.sina.com.cn/s/blog_6c81891701017a34.html StackPane ...
- 【Jmeter自学】Jmeter里的指标
聚合报告 Average:平均响应时间(毫秒ms) Median:中值时间,N个数据从小到大排列,第N/2个数 9x%Line:N个数据从小到大排列,第9x%N个数.所有数据中9x%的响应时间都小于9 ...