无为清净楼资源网 Design By www.qnjia.com

点击添加 动态添加两个文本框: 分别表示x和y的值,点击取消 删除本行的2个文本框
Jquery 动态添加按钮实现代码
记得要引入jquery.js
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js"><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>

&nbsp;</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;">
&nbsp;</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">

&nbsp;</td>
</tr>
</table>

</div>

标签:
Jquery,动态添加按钮

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。