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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
node.js实现登录注册页面
Apr 08 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
用js实现放大镜效果
2020/10/28 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
使用Python更换外网IP的方法
2018/07/09 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python中p-value的实现方式
2019/12/16 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
毕业证丢失证明
2014/01/15 职场文书
中学家长会邀请函
2014/01/17 职场文书
个人主要事迹材料
2014/08/26 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang