Jquery 动态添加按钮实现代码

lym6688tym

lym6688tym

2016-02-19 13:05

图老师小编精心整理的Jquery 动态添加按钮实现代码希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

点击添加 动态添加两个文本框: 分别表示x和y的值,点击取消 删除本行的2个文本框

记得要引入jquery.js

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
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 += "tda onclick="del(" + randomNumber + ")" style='cursor:pointer'取消/aspan style="color:red"/span/td/tr/table";
var $mm = $(s);
var $parent = $("#mian");
$parent.append($mm);
})
})

function del(aa) {
$("#miantable[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,'').length1)
{
$("#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代码

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
div
table
tr
td
项目名称

/td
td
asp:TextBox runat="server"/asp:TextBox
/td
td

/td
td

/td
/tr
tr
td
asp:Label runat="server" Text="项目编号:"/asp:Label
/td
td
asp:TextBox runat="server"/asp:TextBox
/td
td

/td
td

/td
/tr
tr
td
asp:Label runat="server" Text="巡查人员:"/asp:Label
/td
td
asp:TextBox runat="server"/asp:TextBox
/td
td

/td
td

/td
/tr
/table
table width="450"

tr
td width="83px"
asp:Label runat="server" Text="面:"/asp:Label
/td
td
input name="m1" type="text" /
/td
td
input name="m1" type="text" /
/td
td

input type="button" value="添加" //td
/tr

/table
div/div

table width="450"
tr
td
面描述:
/td
td colspan="2"
asp:TextBox runat="server" Width="247px"/asp:TextBox
/td
td

/td
/tr
tr
td

/td
td
/td
td

/td
td

/td
/tr
tr
td

/td
td colspan="3"
asp:Label runat="server" ForeColor="Red"/asp:Label
/td
/tr
tr
td colspan="4"

/td
/tr
/table

/div

展开更多 50%)
分享

猜你喜欢

Jquery 动态添加按钮实现代码

Web开发
Jquery 动态添加按钮实现代码

jQuery 添加/移除CSS类实现代码

Web开发
jQuery 添加/移除CSS类实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

jQuery 浮动广告实现代码

Web开发
jQuery 浮动广告实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 弹出层实现代码

Web开发
jquery 弹出层实现代码

jQuery 页面 Mask实现代码

Web开发
jQuery 页面 Mask实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

合并两个带头结点的有序循环链表合并为一个带头结点的有序循环链

合并两个带头结点的有序循环链表合并为一个带头结点的有序循环链

非缓冲文件系统

非缓冲文件系统
下拉加载更多内容 ↓