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. UVA-11925 Generating Permutations （逆向思维）
			
    题目大意:给出1~n的某个排列,问由升序变到这个排列最少需要几次操作.操作1:将头两个数交换:操作2:将头一个数移动最后一个位置. 题目分析:反过来考虑,将这个排列变为升序排列,那么这个变化过程实际上 ...
    
			
    2. 
						
  2. 【Matplotlib】概要总览第一讲
			
    之前一直使用 matplotlib, 但都是随用随查,现在特开此系列帖子已记录其学习过程. Matplotlib可能是Python 扩展包中仅有的最流行的 2D 绘图库.她不仅提供了快速的方式可视化P ...
    
			
    3. 
						
  3. echarts入门1【柱状图/饼图】
			
    这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...
    
			
    4. 
						
  4. 用setTimeout实现setInterval函数
			
    最近get一个新知识,也不算是新知识,可能是以前自己没有认真对待(对自己无语ing,si不si傻). 废话不多说,直接来看代码吧 function setInterval(func, t){ var  ...
    
			
    5. 
						
  5. vue2 简单的留言板
			
    没有写样式,只是写个功能 <template> <div class="headers"> <div class="form"&g ...
    
			
    6. 
						
  6. linux下informatica服务安装和配置
			
    本文中将会用infa简称代替informatica 1.安装前准备 介质名称 版本信息 描述 Informatica Powercenter 9.5.1 for Linux 64 bit 必须 Jav ...
    
			
    7. 
						
  7. 关于CMD/DOS中的短文件名规则
			
    最近在制作一个批处理的过程中发现一个很郁闷的问题,就是有些时候搜索到的结果不是我们想要的
    
			
    8. 
						
  8. excel 应用，右下角的小十字拖拽的时候形成递减的数列
			
    excel 应用,右下角的小十字拖拽的时候形成递减的数列 2012-12-20 15:16无良小鬼 | 浏览 352 次 比如说我想要这样一列数字201220112010……这样递减的数列,而不是递增 ...
    
			
    9. 
						
  9. spring注解事务使用总结
			
    在使用spring的注解事务的时候,需要考虑到事务的传播行为.遇到什么类型的异常时,事务才起作用.事务方法之间的嵌套调用时,怎么样才生效等等诸多问题.网上搜到很多的主要还是一堆理论文字描述,我这里给出 ...
    
			
    10. 
						
  10. PowerDesigner15.1使用技巧总结
			
    1.  生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本.   在Options选项卡里, ...
    
			
    11.