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. redis集群登陆
			
    如何登陆redis集群 redis-cli -h 10.12.4.45 -p 7000 -c -a alkdsjf134rj01 ip:10.12.4.45 集群中的一个点 -c 以集群方式登陆.cl ...
    
			
    2. 
						
  2. 解析xml(当节点中有多个子节点)
			
    概要:解析一个xml,当一个节点中又包含多个子节点如何解析,对比一个节点中不包括其他节点的情况. 一,xml样例 <cisReports batNo="查询批次号" unit ...
    
			
    3. 
						
  3. 解决maven install报错信息(Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile )
			
    Maven install失败 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (d ...
    
			
    4. 
						
  4. LightOJ - 1396 ：Palindromic Numbers (III)（逐位确定法）
			
    Vinci is a little boy and is very creative. One day his teacher asked him to write all the Palindrom ...
    
			
    5. 
						
  5. java - 百钱百鸡小算法
			
    传送门: 袁咩咩的小小博客 百钱百鸡是一个非常经典的不定方程问题,最早源于我国古代的<算经>,这是古代著名数学家张丘建首次提出的.百钱百鸡问题原文如下: 鸡翁一,值钱五,鸡母一,值钱三,鸡 ...
    
			
    6. 
						
  6. http的报文结构和状态码的含义
			
    HTTP响应报文解剖 响应报文结构 HTTP的响应报文也由三部分组成(响应行+响应头+响应体): 以下是一个实际的HTTP响应报文: ①报文协议及版本: ②状态码及状态描述: ③响应报文头,也是由多个 ...
    
			
    7. 
						
  7. 掉电脉冲映射串口log和dmesg到文件中的log
			
    1.echo 1 > /mytest/boot_times 2.systemctl enable i2c_dmesg.service root:/mytest# tree . |-- boot_ ...
    
			
    8. 
						
  8. Archiva与maven配置使用
			
    在之前的博文里头已经介绍了Archiva私服的使用,本文主要介绍,如何与maven进行配置,在进行maven使用的时候可以自动上传至Archiva上 1.设置maven的用户配置,到maven的安装目 ...
    
			
    9. 
						
  9. Python——内置函数（待完善）
			
    内置函数(68个),分为六大类 思维导图: 1. 迭代器/生成器相关(3个) (1)range for i in range(10): #0-9 print(i) for i in range(1,1 ...
    
			
    10. 
						
  10. 转：HL7 Tools suite
			
    HL7 Tools suite   HL7的官网有很多开源工具, 比如:RoseTree,V3Generator,RMIM Designer, Design Repository, V2 &  ...
    
			
    11.