Jquery 動態(tài)添加按鈕實現代碼

更新時間：2010年05月06日 22:22:15 作者：

在測量中面是有不同的點組成，在輸入的時候需要動態(tài)的添加不同點的坐標值

點擊添加動態(tài)添加兩個文本框：分別表示x和y的值，點擊取消刪除本行的2個文本框

記得要引入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; 
} 
//循環(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("請輸入 面 的坐標值!"); 
$("#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> 