Jquery 动态添加按钮实现代码


Posted in Javascript onMay 06, 2010

点击添加 动态添加两个文本框: 分别表示x和y的值,点击取消 删除本行的2个文本框
Jquery 动态添加按钮实现代码
记得要引入jquery.js

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#btnMian").click(function() { 
//生成 0 到100000 随机数 Mapth.random产生 0到1的随机数 然后乘以100000 
var maxNumber = 100000; 
var randomNumber = Math.round(maxNumber * Math.random()); 
// alert(randomNumber); 
var s = ""; 
s += "<table name='" + randomNumber + "' width=\"450\"><tr>"; 
s += "<td width=\"72\"></td>"; 
s += "<td width=\"155\" align=\"left\">"; 
s += "<input type='text' name='m1' /></td>"; 
s += "<td align=\"left\" width=\"155\"><input type='text' name='m1' /></td>"; 
s += "<td><a onclick=\"del(" + randomNumber + ")\" style='cursor:pointer'>取消</a><span style=\"color:red\"></span></td></tr></table>"; 
var $mm = $(s); 
var $parent = $("#mian"); 
$parent.append($mm); 
}) 
}) function del(aa) { 
$("#mian>table[name=" + aa + "]").remove(); 
} 
function checkForm() { 
var txtItemName = $("#txtItemName").val(); 
if (txtItemName.replace(/[\s]/g, '').length < 1) { 
$("#lblMess").html("请输入项目名称"); 
$("#lblMess").addClass("onBlurClassError"); 
return false; 
} 
var txtItemId = $("#txtItemId").val(); 
if (txtItemId.replace(/[\s]/g, '').length < 1) { 
$("#lblMess").html("请输入项目编号"); 
$("#lblMess").addClass("onBlurClassError"); 
return false; 
} 
var txtUser = $("#txtUser").val(); 
if(txtUser.replace(/[\s]/g,'').length<1) 
{ 
$("#lblMess").html("请输入巡查人员"); 
$("#lblMess").addClass("onBlurClassError"); 
return false; 
} 
//循环遍历 文本框的值 
var zheng = new RegExp("(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"); 
var flag = true; 
$("[name='m1']:text").each(function() { 
if ($(this).val().replace(/[\s]/g, '').length < 1) { 
$("#lblMess").html("请输入 面 的坐标值!"); 
$("#lblMess").addClass("onBlurClassError"); 
// return false; 
flag = false; 
} 
else { 
if (!zheng.test($(this).val())) { 
$("#lblMess").html("请输入正确的 面 的坐标值!"); 
$("#lblMess").addClass("onBlurClassError"); 
//return false 
flag = false; 
} 
} 
}) 
if (flag == false) { 
return false; 
} 
var mian = $("#txtMianInfo").val(); 
if (mian.replace(/[\s]/g).length < 1) { 
$("#lblMess").html("请输入面的描述"); 
$("#lblMess").addClass("onBlurClassError"); 
return false; 
} 
return true; 
} 
</script>

html代码
<div id="content"> 
<table style="width: 450px;"> 
<tr> 
<td class="style1"> 
项目名称 </td> 
<td class="style2"> 
<asp:TextBox ID="txtItemName" runat="server"></asp:TextBox> 
</td> 
<td class="style3"> 
</td> 
<td> 
</td> 
</tr> 
<tr> 
<td class="style1"> 
<asp:Label ID="Label3" runat="server" Text="项目编号:"></asp:Label> 
</td> 
<td class="style2"> 
<asp:TextBox ID="txtItemId" runat="server"></asp:TextBox> 
</td> 
<td class="style3"> 
</td> 
<td> 
</td> 
</tr> 
<tr> 
<td class="style1"> 
<asp:Label ID="Label2" runat="server" Text="巡查人员:"></asp:Label> 
</td> 
<td class="style2"> 
<asp:TextBox ID="txtUser" runat="server"></asp:TextBox> 
</td> 
<td class="style3"> 
</td> 
<td> 
 </td> 
</tr> 
</table> 
<table width="450"> 
<tr> 
<td width="83px"> 
<asp:Label ID="Label6" runat="server" Text="面:"></asp:Label> 
</td> 
<td class="style2"> 
<input id="Text5" name="m1" type="text" /> 
</td> 
<td class="style3"> 
<input id="Text6" name="m1" type="text" /> 
</td> 
<td> 
<input id="btnMian" type="button" value="添加" /></td> 
</tr> 
</table> 
<div id="mian" style="width:450px"></div> 
<table width="450"> 
<tr> 
<td class="style1"> 
面描述: 
</td> 
<td colspan="2" style="text-align: left"> 
<asp:TextBox ID="txtMianInfo" runat="server" Width="247px"></asp:TextBox> 
</td> 
<td> 
</td> 
</tr> 
<tr> 
<td class="style1"> 
</td> 
<td class="style2" style="text-align:center;"> 
 </td> 
<td class="style3"> 
</td> 
<td> 
</td> 
</tr> 
<tr> 
<td class="style1"> 
</td> 
<td class="style2" style="text-align:left;" colspan="3"> 
<asp:Label ID="lblMess" runat="server" ForeColor="Red"></asp:Label> 
</td> 
</tr> 
<tr> 
<td class="style1" colspan="4"> 
 </td> 
</tr> 
</table> 
</div>
Javascript 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
jquery DOM操作 基于命令改变页面
May 06 #Javascript
JQuery 学习笔记01 JQuery初接触
May 06 #Javascript
Jquery 扩展方法
May 06 #Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 #Javascript
屏蔽F1~F12的快捷键的js函数
May 06 #Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 #Javascript
picChange 图片切换特效的函数代码
May 06 #Javascript
You might like
php email邮箱正则
2008/10/08 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Django与JS交互的示例代码
2017/08/23 Python
python 实现A*算法的示例代码
2018/08/13 Python
python常用排序算法的实现代码
2019/11/08 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
毕业生就业自荐书
2013/12/15 职场文书
初婚未育证明
2014/01/15 职场文书
2014新年寄语
2014/01/20 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
还款承诺书范文
2014/05/20 职场文书
三严三实对照检查材料
2014/09/22 职场文书
通知函的格式
2015/04/27 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
给领导敬酒词
2015/08/12 职场文书