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. 使用Jenkins来实现内部的持续集成流程（上）
			
    前言 Jenkins和TeamCity都是大杀器,用于搭建内部持续集成环境都是妥妥的.本篇主要介绍Jenkins的安装,下篇将介绍相关配置和使用. 目录 安装和配置 第一次启动 插件安装,第一次进入时 ...
    
			
    2. 
						
  2. Socket编程中检测端口是否被占用
			
            一般检测一个端口是否被占用的方法是看bind是否成功,其实在Windows中有两个API可以获取到当前系统端口的占用情况(GetTcpTable/GetUdpTable),利用这两个函 ...
    
			
    3. 
						
  3. python实现树结构
			
    树在计算机科学的许多领域中使用,包括操作系统,图形,数据库系统和计算机网络.树数据结构与他们的植物表亲有许多共同之处.树数据结构具有根,分支和叶.自然界中的树和计算机科学中的树之间的区别在于树数据结构 ...
    
			
    4. 
						
  4. Spring学习-学习路线
			
    Spring的IOC Spring的AOP , AspectJ Spring的事务管理 , 三大框架的整合
    
			
    5. 
						
  5. html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）
			
    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...
    
			
    6. 
						
  6. CH3201 Hankson的趣味题
			
    题意 3201 Hankson的趣味题 0x30「数学知识」例题 描述 Hanks博士是BT(Bio-Tech,生物技术)领域的知名专家,他的儿子名叫Hankson.现在,刚刚放学回家的Hankson ...
    
			
    7. 
						
  7. nginx 配置实现逻辑预算
			
    nginx 的配置 不支持逻辑与和逻辑非运算,也不支持if 嵌套,只能用其他方式实现 set $flag 0; if ($host != name) { set $flag "${flag} ...
    
			
    8. 
						
  8. nexus yum 私服集成
			
      nexus 集成了 yum 私服使用起来还是比较简单的 配置 yum proxy 实际使用我们可能需要配置centos 以及epel 的源 centos可以用http://mirror.cento ...
    
			
    9. 
						
  9. Swift学习——A Swift Tour 协议和扩展
			
    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhenyu5211314/article/details/28854395 Protocols an ...
    
			
    10. 
						
  10. Linux  vnc服务器操作(启动/停止/重起/自启动)
			
    8.启动和停止VNC服务1)启动VNC服务命令[root@testdb ~]# /etc/init.d/vncserver startStarting VNC server: 1:rootNew 't ...
    
			
    11.