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()的更多相关文章
	

    
								
  1. 如何给动态添加的form表单控件添加表单验证
		
    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
    
		
    2. 
						
  2. JS框架avalon简单例子 行编辑 添加 修改 删除 验证
		
    为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...
    
		
    3. 
						
  3. delphi 注册表操作(读取、添加、删除、修改)完全手册
		
    DELPHI VS PASCAL(87)  32位Delphi程序中可利用TRegistry对象来存取注册表文件中的信息. 一.创建和释放TRegistry对象 1.创建TRegistry对象.为了操 ...
    
		
    4. 
						
  4. IOS 表视图(UITableVIew)的使用方法(5)表视图的编辑功能（删除）
		
    默认的,如果表视图支持编辑,那用户可以通过两种方式来删除某些行,其一为单击左侧的红色按钮后行右侧显示“Delete”按钮,其二为在单元行上的手指向左滑动,“Delete”按钮也会出现供用户单击.无论哪 ...
    
		
    5. 
						
  5. [Swift通天遁地]二、表格表单-(10)快速添加日期选择/多选/动作表单/地图等自定义表单
		
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
    
		
    6. 
						
  6. 为SQL Server表中的列添加/修改/删除注释属性（sp_addextendedproperty、sp_updateextendedproperty、sp_dropextendedproperty）
		
    本篇基本完全参考:sql--sp_addextendedproperty和sp_updateextendedproperty (Transact-SQL) 三个存储过程用法一样,以sp_addexte ...
    
		
    7. 
						
  7. oracle表中字段的添加、删除
		
    在oracle数据库中为一张表添加一个字段: alter table tableName add ClIENT_OS varchar2(20) default '0' not null ; 在orac ...
    
		
    8. 
						
  8. 优化MVC，实现数据库表的记录的添加、删除、修改、查询。
		
    一.在UserDAO里面重写实体user要调用的方法: 1.查询所有user表中的记录.用getAllUser()方法得到List public class UserDAO { public List ...
    
		
    9. 
						
  9. 数据结构之 线性表---单链表操作A （删除链表中的指定元素）
		
    数据结构上机测试2-1:单链表操作A Time Limit: 1000MS Memory limit: 4096K 题目描述 输入n个整数,先按照数据输入的顺序建立一个带头结点的单链表,再输入一个数据 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. hdu——1873(优先队列)
			
    看病要排队 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
    
			
    2. 
						
  2. HTML 5之meta标签viewport应用
			
    关于viewport的概念: 先了解移动设备的屏幕尺寸和设备尺寸: iPhone3 设备尺寸 320*480 ; 屏幕尺寸  320*480 iPhone4 设备尺寸 320*480 ; 屏幕尺寸   ...
    
			
    3. 
						
  3. Zabbix SNMP OID discovery，自动发现
			
    Unlike file system and network interface discovery, the item does not necessarily have to have “snmp ...
    
			
    4. 
						
  4. less 全局变量使用
			
    less 全局变量使用 忽然想定义一个变量,但是却需要每个 .vue 文件都需要单独引入这个全局变量才可以,导致很多重复不必要的工作,因而得寻找一种可以任何地方都可以访问的方法 借助换肤这个功能 sa ...
    
			
    5. 
						
  5. (C#基础)深浅拷贝理解
			
    一方面感觉实在无趣,不知道做什么了,纯粹来个打字练习,于是有了这个. 二方面深感自己C#基础之薄弱,于是对着园友的文章一边看,一边练习,因为很多次看了,没有多久就忘了,还有练习过程中会出现一些问题,这 ...
    
			
    6. 
						
  6. jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
			
    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...
    
			
    7. 
						
  7. 免费获取半年 Bitdefender Total Security 2014
			
    免费获取半年 Bitdefender Total Security 2014,安装后剩余 200 天使用期.安装程序语言是德语,调包下安装语言应该也是可以的? 目前德国活动,Bitdefender T ...
    
			
    8. 
						
  8. [Tomcat无法启动]'Starting Tomcat v8.0 Server at localhost' has encountered a problem.
			
    运行一个index.jsp,运行提示如下错误:点击服务器 解决办法1: 点击Tomcat服务器,将服务器里的web工程删除掉,再重新运行index.jsp. 解决办法2: 关闭Tomcat,最简单的方 ...
    
			
    9. 
						
  9. ADS1.2使用
			
    ADS编译错误Error : A1163E: Unknown opcode ARM汇编指令不支持顶格写,否则不能识别,指令前加上空格即可. 使用for(;;;)//死循环,编译报错如下,说是该语句有错 ...
    
			
    10. 
						
  10. 洛谷九月月赛II
			
    题解:模拟 一旦不匹配就要break #include<iostream> #include<cstdio> #include<cstring> #include& ...
    
			
    11.