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').lengths= '<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对象，然后在jqueryconsole.log('start_sort')}}//        del()</script></body>
</html><!--比较麻烦的点在于，1.添加的时候的自增id的问题，2.添加的时候，将你想要添加的节点做成模版的状态，之后在向里面传值，3.设置隐藏之类的属性的时候，
先定义一个类，在script内写命令，将这个类添加到想获得这个属性的classlist中，4,在改的时候，将元素类型切换，变成input形式--><!--在进行自增id功能的实现的时候，开始构想的是查找#标签的数量,然后添加的时候进行+1操作，但是在进行删除操作的时候，一旦删除中间的那个，之后添加会出现相同id的情况-->
<!--想法一：在添加操作中，for循环剔除重复的id，然后进行重新排序.这种id可以不变，这种（暂时没有搞）-->
<!--想法二：直接将序号列，重新排序，在删除，添加操作之后.这种id变化。#

View Code

转载于:https://www.cnblogs.com/taozizainali/p/8629138.html

jquery实现增删改（伪）-老男孩作业day13相关推荐

jQuery表格增删改查
最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!! 总结了一下对table的增删改查,写一篇留着以后自己recode. 1.首先我自己写了一个简单的div布局. 2.实现 ...
Jquery实现增删改查
使用的技术 jquery bootstrap 实现功能:实现对数据的添加,删除,修改,查找原理:利用jquery对dom操作 <!DOCTYPE html> <html lang= ...
8.jQuery例子——增删改查
一.增加记录 1.Jquery中each遍历方法的使用定义:jquery中提供了each方法类似JavaScript中的for(var i=0;i<length;i++).使用方式如下 < ...
datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入  搜索  新增  编辑  删除职业姓名性别爱好 //点击查找 $(" ...
oracle将查询结果声明为伪表,Oracle查询操作（增删改查，伪表，高级查询）实例讲解...
SQL查询操作:增删改查一.SQL操作符算术操作符 + - * / 比较操作符 = != < > <= >= BETWEEN--AND IN LINK IS NULL 逻辑 ...
JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
Jquery实现无限级树状结构并动态添加增删改等编辑功能
点击打开链接源:http://www.56gee.com/Detail/2012/04/11/8AEB74E423/ <!DOCTYPE html PUBLIC "-//W3C//D ...
mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery
本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...
Web课程设计-仿当当网-增删改查-java+jsp+mysql-期末大作业
仿当当网web课程设计-jsp+java+mysql-mvc-期末大作业 Web课程设计一.系统简介二.系统开发及运行环境三.系统设计四.系统实现 Web课程设计这篇文章是为了记录自己在we ...

jquery实现增删改（伪）-老男孩作业day13

jquery实现增删改（伪）-老男孩作业day13相关推荐

最新文章

热门文章