目的：

​点击‘编辑’，弹出对话框，修改数据。

主要知识点：

prevAll()，获取同级别本元素前面的所有元素。

代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .modal{
            position: fixed;
            left:50%;
            top: 50%;
            width: 400px;
            height: 300px;
            background-color: #DDDDDD;
            margin-left: -200px;
            margin-top: -150px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <table border="1">
        <thead></thead>
        <tbody>
            <tr>
                <td>h1</td>
                <td>192.168.1.1</td>
                <td>111</td>
                <td onclick="GetPrev(this)">编辑</td>
            </tr>
        <!--1.弹出框-->
        <!--2.取出表格数据-->
        <!--3.将数据填充到弹出框-->
            <tr>
                <td>h2</td>
                <td>192.168.1.2</td>
                <td>222</td>
                <td onclick="GetPrev(this)">编辑</td>
            </tr>
            <tr>
                <td>h3</td>
                <td>192.168.1.3</td>
                <td>333</td>
                <td onclick="GetPrev(this)">编辑</td>
            </tr>
        </tbody>
    </table>
    <div id="dialog" class="modal hide">
        <form action="" method="get">
            <p>主机名：<input type="text" id="hostname" /></p>
            <p>IP：<input type="text" id="ip" /></p>
            <p>端口：<input type="text" id="port" /></p>
            <input type="submit" value="提交" onclick="return SubmitForm()">
            <!--当onclick返回false，submit不进行提交。-->
            <input type="button" value="取消" onclick="Cancel()">
        </form>
    </div>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function GetPrev(arg){
            var list=[];
            $.each($(arg).prevAll(),function(i){
                var item=$(arg).prevAll()[i];
                //this
                var text=$(item).text();
                list.push(text);
            });
            var new_list=list.reverse();
            //在弹出框的hostname中设置值
            $('#hostname').val(new_list[0]);
            $('#ip').val(new_list[1]);
            $('#port').val(new_list[2]);
 
            $('#dialog').removeClass('hide');
        }
        function SubmitForm(){
            //获取form表单中的input值，判断是否为空；
            var ret=true;
            //遍历所有的input["type=text"]，只要有空值，就将ret设置为false；
            $(':text').each(function(){
                //$(this)=要循环的每一个元素
                var value=$(this).val();
                if(value.trim().length==0){
                    $(this).css('border-color','red');
                    alert("不能为空");
                    ret=false;
                }else{
                    $(this).css('border-color','green');
                }
            });
            return ret;
        }
        function Cancel(){
            $('#dialog').addClass('hide');
        }
    </script>
</body>
</html>
效果：​

jQuery--修改表单数据并提交的更多相关文章

  1. Spring MVC Ajax 嵌套表单数据的提交

    概述 在一些场景里,某个大表单里常常嵌套着一个或若干个小逻辑块,比如以下表单里"设计预审"中包括了一个子模块表单"拟定款项". 在这种情况下该怎么去设计实体类以 ...

  2. 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  3. jquery收集表单数组及去掉字符串最后的逗号！

    jquery收集表单数组: <input type='text' name='one[]' value='' /><br> <input type='text' name ...

  4. 使用jquery修改表单的提交地址

    基本思路: 通过使用jquery选择器得到对应表单的jquery对象,然后使用attr方法修改对应的action 示例程序一: 默认情况下,该表单会提交到page_one.html 点击button之 ...

  5. delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件

    delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...

  6. 【Codebase】JQuery获取表单部分数据提交方法

    JQuery使用ajax提交整个表单最简便的方法就是$('#form').serialize();但如果仅想保存表单中的部分数据,比如仅更新选中的条目,那么获取数据就比较麻烦了. 解决方法:新建一个表 ...

  7. django防止表单数据重复提交

    思路:      在Asp.net中存在Page.IsPostback的方法,所以对django中表单提交数据的重复提交的数据采用相似方法实现,即在页面第一次访问时,即访问方法为GET方法在view中 ...

  8. jquery获取表单数据方法$.serializeArray()获取不到disabled的值

    $.serializeArray()获取不到disabled的值 经实验,$.serializeArray()获取不到disabled的值,如果想要让input元素变为不可用,可以把input设为re ...

  9. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

随机推荐

  1. zju 校队选拔 被虐记

    选拔已经开始了三天才想起来写游记 QAQ.. 7.12 弱弱的Sky_miner来到了ZJU,过程中被热成狗... 然后见到了无数大二大三的大佬们,过程中被热成狗... 后来听靖哥哥说集训的注意事项, ...

  2. Oracle恢复drop误删除的表和建用户操作

    一.表的恢复 对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: 1.从flash back里查询被删除的表 select * from r ...

  3. 11g R2 rac linstener 监听配置

    两个节点host,ipvip ,scan的信息 #eth0-Public IP 162.12.0.1    cqltjcpt1 162.12.0.3    cqltjcpt2 #eth1 PRIVAT ...

  4. Arcmap10.1下安装ArcBrutile0.2.2 （Win7）(转)

    前阵子换了高级新电脑,用的win7旗舰版装了Arcgis10.1,一直没试过ArcBrutile0.2.2能不能用,今天想用的时候发现自己竟然忘记怎么加载这个工具了!!!   网上搜了一下,度娘今天不 ...

  5. (转)Android高性能编程(2)--延迟初始化

    上一篇文章,讲到了很多Android应用开发中需要注意的性能和内存方面的技巧.这一篇文章就是从smali指令级来分析性能优化和内存优化的问题. 如何解决界面启动时间开销大的问题 我们在编写Androi ...

  6. (转)【Android】获取Mac地址【2】

    [Android]获取Mac地址[2] 之前写了[Android]获取Mac地址[1]有些不够详细,现在贴上一些其他代码,仅供参考. (1) 调用android 的API: NetworkInterf ...

  7. jinja2的一些用法

    1.split用法以及乘法运算 {% set user_list=l.users.split(',') %} <tr> <td>{{ l.name }}</td> ...

  8. 在centos6.6中mysql5.5的编译、安装、配置

    今天根据需求要在centos6.6上编译安装mysql5.5,因为以前编译安装过感觉很简单,但是今天还是出现了点小问题,所以把过安装过程总结了一下: 好像从mysql5.5开始编译安装mysql需要用 ...

  9. Oracle 12.1.0.2 对JSON的支持

    Oracle 12.1.0.2版本有一个新功能就是可以存储.查询.索引JSON数据格式,而且也实现了使用SQL语句来解析JSON,非常方便.JSON数据在数据库中以VARCHAR2, CLOB或者BL ...

  10. Oracle 利用执行计划来避免排序操作

    在oracle中,利用index来避免排序 SQL) NOT NULL); SQL> CREATE INDEX IND_T_NOSORT_NAME ON T_NOSORT(NAME); SQL& ...