Jquery 動態(tài)添加按鈕實現(xiàn)代碼
更新時間:2010年05月06日 22:22:15 作者:
在測量中 面是有不同的點組成,在輸入的時候 需要動態(tài)的添加 不同點的坐標(biāo)值
點擊添加 動態(tài)添加兩個文本框: 分別表示x和y的值,點擊取消 刪除本行的2個文本框
記得要引入jquery.js
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#btnMian").click(function() {
//生成 0 到100000 隨機(jī)數(shù) Mapth.random產(chǎn)生 0到1的隨機(jī)數(shù) 然后乘以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;
}
//循環(huán)遍歷 文本框的值
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("請輸入 面 的坐標(biāo)值!");
$("#lblMess").addClass("onBlurClassError");
// return false;
flag = false;
}
else {
if (!zheng.test($(this).val())) {
$("#lblMess").html("請輸入正確的 面 的坐標(biāo)值!");
$("#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代碼
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- jQuery動態(tài)添加的元素綁定事件處理函數(shù)代碼
- jQuery動態(tài)添加刪除select項(實現(xiàn)代碼)
- jQuery給動態(tài)添加的元素綁定事件的方法
- jquery動態(tài)添加刪除(tr/td)
- jquery動態(tài)添加元素事件失效問題解決方法
- jquery動態(tài)添加刪除div 具體實現(xiàn)
- jquery div拖動效果示例代碼
- jQuery拖動div、移動div、彈出層實現(xiàn)原理及示例
- Jquery寫一個鼠標(biāo)拖動效果實現(xiàn)原理與代碼
- jQuery實現(xiàn)360°全景拖動展示
- jQuery實現(xiàn)DIV層淡入淡出拖動特效的方法
- jquery實現(xiàn)可拖動DIV自定義保存到數(shù)據(jù)的實例
- jQuery動態(tài)添加可拖動元素完整實例(附demo源碼下載)
相關(guān)文章
JQuery魔力之$("tagName")與selector
DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$(“tagName”)這么簡單!tag標(biāo)簽(可以是:p、div、button …)標(biāo)簽本身具有ID、Class等屬性2012-03-03基于jQuery實現(xiàn)圖片推拉門動畫效果的兩種方法
本文給大家分享兩種方法實現(xiàn)''推拉門''動畫效果也可以稱作是手風(fēng)琴效果,具體實現(xiàn)方法大家通過本文一起學(xué)習(xí)吧2017-08-08jquery實現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法
這篇文章主要介紹了jquery實現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法,包含了完整的實例與關(guān)鍵代碼的注釋說明,并附帶了所需知識點的參考文章地址,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法,需要的朋友可以參考下2015-10-10jQuery實現(xiàn)ctrl+enter(回車)提交表單
本文章來給大家介紹在我們輸入完內(nèi)容之后直接按Ctrl+Enter提交表單實現(xiàn)程序,此方法一般是用于textarea中哦,其它的input這類的就不需了。2015-10-10