表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()
1.$(..).removeClass() 去除属性
2$(..).append 把内容加在后面
3.$(..).preAll() 前面所有的兄弟属性
4.$(..).attr('b') 属性b对应的数值
5.document.createElement() 创建标签
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .model{
- position: fixed;
- height: 500px;
- width: 500px;
- top: 50%;
- left: 50%;
- margin-top: -200px;
- margin-left: -200px;
- z-index: 10;
- background-color: white;
- }
- .shadow{
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- z-index: 9;
- opacity: 0.6;
- background-color: black;
- }
- .hide{
- display: none;
- }
- </style>
- </head>
- <body>
- <div onclick="add3Element()">添加</div>
- <table border="1px" class="tb">
- <tr>
- <td b="post">1.1.1.1</td>
- <td b="host">80</td>
- <td>
- <span class="edit">编辑</span>|<span class="delete">删除</span>
- </td>
- </tr>
- <tr>
- <td b="post">1.1.1.2</td>
- <td b="host">80</td>
- <td>
- <span class="edit">编辑</span>|<span class="delete">删除</span>
- </td>
- </tr>
- <tr>
- <td b="post">1.1.1.3</td>
- <td b="host">80</td>
- <td>
- <span class="edit">编辑</span>|<span class="delete">删除</span>
- </td>
- </tr>
- <tr>
- <td b="post">1.1.1.4</td>
- <td b="host">80</td>
- <td>
- <span class="edit">编辑</span>|<span class="delete">删除</span>
- </td>
- </tr>
- </table>
- <div class="model hide">
- <div><input type="text" a="post"></div>
- <div><input type="text" a="host"></div>
- <div><input type="button" value="取消" onclick="onDelete()"></div>
- <div><input type="button" value="确定" onclick="onSure()"></div>
- </div>
- <div class="shadow hide"></div>
- <script src="../jquery-2.12.4.js"></script>
- <script>
- $('.edit').click(function () {
- $('.model, .shadow').removeClass('hide');
- var v = $(this).parent().prevAll();
- v.each(function(){
- tag = $(this).attr('b'); //获取属性b的值
- console.log(tag);
- ft = $(this).text();
- tag1 = '.model input[a=' + tag +']';
- $(tag1).val(ft)
- })
- });
- $('.delete').click(function () {
- $(this).parent().parent().remove()
- });
- function onDelete(){
- $('.model, .shadow').addClass('hide');
- $('.model input[type="text"]').val('')
- }
- function add3Element() {
- $('.model, .shadow').removeClass('hide');
- }
- function onSure(){
- t1 = '1.1.1.1';
- t2 = '80';
- var tr = document.createElement('tr');
- td1 = document.createElement('td');
- td1.innerHTML=t1;
- td2 = document.createElement('td');
- td2.innerHTML=t2;
- $(tr).append(td1);
- $(tr).append(td2);
- console.log(tr);
- $('.tb').append(tr)
- }
- </script>
- </body>
- </html>
表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()的更多相关文章
- 如何给动态添加的form表单控件添加表单验证
最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
- JS框架avalon简单例子 行编辑 添加 修改 删除 验证
为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...
- delphi 注册表操作(读取、添加、删除、修改)完全手册
DELPHI VS PASCAL(87) 32位Delphi程序中可利用TRegistry对象来存取注册表文件中的信息. 一.创建和释放TRegistry对象 1.创建TRegistry对象.为了操 ...
- IOS 表视图(UITableVIew)的使用方法(5)表视图的编辑功能(删除)
默认的,如果表视图支持编辑,那用户可以通过两种方式来删除某些行,其一为单击左侧的红色按钮后行右侧显示“Delete”按钮,其二为在单元行上的手指向左滑动,“Delete”按钮也会出现供用户单击.无论哪 ...
- [Swift通天遁地]二、表格表单-(10)快速添加日期选择/多选/动作表单/地图等自定义表单
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 为SQL Server表中的列添加/修改/删除注释属性(sp_addextendedproperty、sp_updateextendedproperty、sp_dropextendedproperty)
本篇基本完全参考:sql--sp_addextendedproperty和sp_updateextendedproperty (Transact-SQL) 三个存储过程用法一样,以sp_addexte ...
- oracle表中字段的添加、删除
在oracle数据库中为一张表添加一个字段: alter table tableName add ClIENT_OS varchar2(20) default '0' not null ; 在orac ...
- 优化MVC,实现数据库表的记录的添加、删除、修改、查询。
一.在UserDAO里面重写实体user要调用的方法: 1.查询所有user表中的记录.用getAllUser()方法得到List public class UserDAO { public List ...
- 数据结构之 线性表---单链表操作A (删除链表中的指定元素)
数据结构上机测试2-1:单链表操作A Time Limit: 1000MS Memory limit: 4096K 题目描述 输入n个整数,先按照数据输入的顺序建立一个带头结点的单链表,再输入一个数据 ...
随机推荐
- C#并行编程(1)
一.基于任务的程序设计 共享内存多核OS和分布式内存OS 共享内存多核OS-一个微处理器由多个内核组成,且每个内核共享一段私有内存: 分布式内存OS-- 由多个微处理器组成,每个微处理器可以有自己的私 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- 快速切题CF 158B taxi 构造 && 82A double cola 数学观察 难度:0
实在太冷了今天 taxi :错误原因1 忽略了 1 1 1 1 和 1 2 1 这种情况,直接认为最多两组一车了 2 语句顺序错 double cola: 忘了减去n的序号1,即n-- B. Taxi ...
- 趣谈StateServer在Web Garden,Web Farm下的使用
上一篇翻译的博客[译文]漫谈ASP.NET中的Session已经介绍了Session的基础知识,如果看过了的话对Session应该有了一个比较清晰的认识了,现在我来谈谈我所遇到的困境以及对Sessio ...
- Nginx安装配置详解
http://nginx.org/download/ 下载对应的Nginx 安装nginx之前需要安装依赖包 yum install gcc gcc-c++ zlib-devel pcre-devel ...
- 通过java解析域名获得IP地址
IP地址是Internet主机的作为路由寻址用的数字型标识,人不容易记忆.因而产生了域名(domain name)这一种字符型标识. DNS即为域名解析服务.在这里我们如果想通过java程序来解析域名 ...
- ubuntu 11.04 old sources.list
#deb cdrom:[Ubuntu 11.04 _Natty Narwhal_ - Release amd64 (20110427.1)]/ natty main restricted # See ...
- Codeforces 133A:HQ9+
A. HQ9+ time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...
- WinForm获取当前路径汇总
Winform获取应用程序的当前路径的方法集合汇总,值得收藏备用 具体如下, //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembl ...
- noi.ac上的一套(假)NOI题
noi.ac上的一套(假)NOI题 本来想着可以刷点通过量的,结果发现好像并不是这样的. 整数 description 给你\(n,p\),要你求\(\sum_{k=1}^n\sum_{i=1}^k\ ...