jQuery--修改表单数据并提交
目的:
点击‘编辑’,弹出对话框,修改数据。
主要知识点:
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--修改表单数据并提交的更多相关文章
- Spring MVC Ajax 嵌套表单数据的提交
概述 在一些场景里,某个大表单里常常嵌套着一个或若干个小逻辑块,比如以下表单里"设计预审"中包括了一个子模块表单"拟定款项". 在这种情况下该怎么去设计实体类以 ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- jquery收集表单数组及去掉字符串最后的逗号!
jquery收集表单数组: <input type='text' name='one[]' value='' /><br> <input type='text' name ...
- 使用jquery修改表单的提交地址
基本思路: 通过使用jquery选择器得到对应表单的jquery对象,然后使用attr方法修改对应的action 示例程序一: 默认情况下,该表单会提交到page_one.html 点击button之 ...
- delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件
delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...
- 【Codebase】JQuery获取表单部分数据提交方法
JQuery使用ajax提交整个表单最简便的方法就是$('#form').serialize();但如果仅想保存表单中的部分数据,比如仅更新选中的条目,那么获取数据就比较麻烦了. 解决方法:新建一个表 ...
- django防止表单数据重复提交
思路: 在Asp.net中存在Page.IsPostback的方法,所以对django中表单提交数据的重复提交的数据采用相似方法实现,即在页面第一次访问时,即访问方法为GET方法在view中 ...
- jquery获取表单数据方法$.serializeArray()获取不到disabled的值
$.serializeArray()获取不到disabled的值 经实验,$.serializeArray()获取不到disabled的值,如果想要让input元素变为不可用,可以把input设为re ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
随机推荐
- 【PS实例】照片拼图的制作
本系列教程将开始讲解PS的一些制作实例,通过实例的讲解同时介绍各种工具和面板机快捷键的使用,这样能够让大家更有兴趣学习,在学习的同时能够创造出自己喜欢的东西.本人使用的教程都是根据本人多次调试制作,仅 ...
- WCF OpenTimeout, CloseTimeout, SendTimeout, ReceiveTimeout
1.OpenTimeout 客户端与服务端建立连接时,如果超过指定时间都还没完成,就引发TimeoutException. 在TCP通讯中,服务器必须首先准备好侦听端口并在该端口上侦听(Listen) ...
- (转)Android之Adapter用法总结
1.概念 Adapter是连接后端数据和前端显示的适配器接口,是数据和UI(View)之间一个重要的纽带.在常见的View(ListView,GridView)等地方都需要用到Adapter.如下图直 ...
- 处理mysql主从中断
主从同步中断跳过处理步骤: slave stop;set GLOBAL SQL_SLAVE_SKIP_COUNTER=1;slave start; 在使用set global sql_slave_s ...
- You-Get 一键下载全网视频资源
下载视频 无论是单纯的下载视频收藏,还是以便离线收看,都离不开“下载”,好的工具让你把注意力更好的放在视频的本身,而不用考虑要如何下载视频.下载视频从来不乏方法,之前也介绍了下载 Youtube ...
- cors,跨域资源共享,Java配置
一.概念 1. 如果两个页面的协议.域名和端口是完全相同的,那么它们就是同源的,不同则为跨域 2. ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允 ...
- yii2 csrf验证原理分析
知识补充 因为yii2 csrf的验证的加解密 涉及到异或运算 所以需要先补充php里字符串异或运算的相关知识,不需要的可以跳过 ^异或运算不一样返回1 否者返回 0在PHP语言中,经常用来做加密的运 ...
- 数据科学:Pandas 和 Series 的 describe() 方法
一.Pandas 和 Series 的 describe() 方法 1)功能 功能:对数据中每一列数进行统计分析:(以“列”为单位进行统计分析) 默认只先对“number”的列进行统计分析: 一列数据 ...
- java ------------用Array.sort()输出数组元素的最大值,最小值,平均值~~~~
总结:输出最大值,最小值,可以先排序,再输出就容易点了.不用循环判断.我还没学.但是觉得很好用 package com.aini; import java.util.Arrays; import ja ...
- windows抓包工具Wireshark(过滤)
1.IP过滤 ip.src ==192.168.0.208(ip.src eq 192.168.0.208) //来源等于某个ip ip.dst ==192.168.0.208(ip.dst eq 1 ...