Jquery dynamic addition button implementation code

Click Add to dynamically add two text boxes: x and y, respectively. Click Cancel to delete the two text boxes of the row.

Remember to introduce jquery. js
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# BtnMian"). click (function (){
// Generate a random number ranging from 0 to 100000. Mapth. random generates a random number ranging from 0 to 1 and multiply it by 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 '> cancel </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" pai.html ("Enter the project name ");
$ ("# LblMess"). addClass ("onBlurClassError ");
Return false;
}
Var txtItemId = $ ("# txtItemId"). val ();
If (txtItemId. replace (/[\ s]/g, ''). length <1 ){
$ ("# LblMess" 2.16.html ("Enter the project number ");
$ ("# LblMess"). addClass ("onBlurClassError ");
Return false;
}
Var txtUser = $ ("# txtUser"). val ();
If (txtUser. replace (/[\ s]/g, ''). length <1)
{
$ ("# LblMess" ).html ("Enter inspection personnel ");
$ ("# LblMess"). addClass ("onBlurClassError ");
Return false;
}
// Cyclically traverse the value of the text box
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 ("Enter the coordinate value of the plane! ");
$ ("# LblMess"). addClass ("onBlurClassError ");
// Return false;
Flag = false;
}
Else {
If (! Zheng. test ($ (this). val ())){
$ ("# LblMess" ).html ("enter the correct coordinate value of the plane! ");
$ ("# 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 ("Enter the description ");
$ ("# LblMess"). addClass ("onBlurClassError ");
Return false;
}

Return true;
}
</Script>

Html code
Copy codeThe Code is as follows:
<Div id = "content">
<Table style = "width: pixel PX;">
<Tr>
<Td class = "style1">
Project name

</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 = "Project No.:"> </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 = "inspection personnel:"> </asp: Label>
</Td>
<Td class = "style2">
<Asp: TextBox ID = "txtUser" runat = "server"> </asp: TextBox>
</Td>
<Td class = "style3">

</Td>
<Td>

</Td>
</Tr>
</Table>
& Lt; table width = "450" & gt;

<Tr>
<Td width = "83px">
<Asp: Label ID = "Label6" runat = "server" Text = "surface:"> </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 = "add"/> </td>
</Tr>

</Table>
<Div id = "mian" style = "width: pixel PX"> </div>

& Lt; table width = "450" & gt;
<Tr>
<Td class = "style1">
Description:
</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>