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. 垃圾收集器G1推荐配置
			
    -XX:OnOutOfMemoryError=kill -9 %p -XX:OnError=jstack -F %p >ErrorDump.log -Xms4g -Xmx8g -server - ...
    
			
    2. 
						
  2. IOS-网络（NSURLSession）
			
    一.NSURLSession的基本用法 // // ViewController.m // NSURLSession // // Created by ma c on 16/2/1. // Copyr ...
    
			
    3. 
						
  3. Javascript 面向对象编程（补充）：封装
			
    Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...
    
			
    4. 
						
  4. 011PHP文件处理——文件处理 文件内容分页操作类
			
    <?php /** * 文件内容分页操作类: */ //访问地址:http://basicphp.com/006file/011.php?&page=1 class StrPage {  ...
    
			
    5. 
						
  5. POJ 2251 Dungeon Master bfs 难度:0
			
    http://poj.org/problem?id=2251 bfs,把两维换成三维,但是30*30*30=9e3的空间时间复杂度仍然足以承受 #include <cstdio> #inc ...
    
			
    6. 
						
  6. 前序+中序->后序   中序+后序->前序
			
    前序+中序->后序 #include <bits/stdc++.h> using namespace std; struct node { char elem; node* l; n ...
    
			
    7. 
						
  7. docker的搭建和简单应用
			
    dockerserver端安装 先下载docker的yum源 wget http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo  ...
    
			
    8. 
						
  8. Android 遍历全国的地区二(获取天气)
			
    根据上次的内容 1. 界面布局 weather_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/a ...
    
			
    9. 
						
  9. 在win10下安装双系统ubuntu16.04.3教程
			
    闲暇了两天,终于想起来要装一个Liunx系统了.于是捣鼓了一番,实现了在Win10下安装Ubuntu16.04.3版本. 一.准备工作 下载Ubuntu 16.04.3镜像 准备一个2G以上的U盘 下 ...
    
			
    10. 
						
  10. JS查找孩子节点
			
    以前看了JS方面的书,如今用到了,书看得再多,不用就忘了,所以经常用用你所学到的知识,温故知新. <!DOCTYPE html> <html> <head> < ...
    
			
    11.