Jquery dynamic addition/deletion plug-in

[Javascript]
// Dynamic content area JS by dust margin 2012 qq: 80213876
 
(Function ($ ){
Var defaults = {
Container: ". dynamicCon", // The outermost container class
Temp: ". temp", // template layer class
Items: ". items", // class
MinCount: 1, // the minimum number of rows (there is a hidden template row at the initial stage. + 1 is required for specific calculation)
MaxCount: 50, // The maximum number of specific rows (there is a hidden template row at the initial stage. + 1 is required for specific calculation)
AddBtn: ". addBtn", // Add button class
DelBtn: ". delBtn" // Delete the button class
}
$. Extend ({
DynamicCon: function (options ){
Options = $. extend (defaults, options );
$ Con = $ (options. container );
$ Temp = $ con. find (options. temp); // template line
$ Temp. attr ({"class": options. items. substring (1, options. items. length )}). wrap ("<div style = 'display: none'> </div> ");
Var tempHtml = escape(%temp.parent(%.html ());
$ Temp. hide ();
// Add a row event
$ Con. find (options. addBtn). live ("click", function (){
If ($ con. find (options. items). length = options. maxCount + 1 ){
Alert ("up to" + options. maxCount + "lines can be added! "); Return false;
}
$ (This). closest (options. items). after (unescape (tempHtml ));
});
// Delete a row event
$ Con. find (options. delBtn). live ("click", function (){
If ($ con. find (options. items). length = options. minCount + 1 ){
Alert ("at least" + options. minCount + "line! "); Return false;
}
$ (This). closest (options. items). remove ();
});
}
});
}) (JQuery );

Demo:
[Html]
<Table style = "width: 100%; border: solid 1px # 78b0dc;" class = "dynamicCon">
<Tr>
<Td colspan = "3" align = "left" style = "color: # f00;">
Note: The field name can only be a string consisting of Chinese characters, numbers, letters, or underscores. The weight can only be non-negative! When the field name is blank, it will not be added! If the weight is null, the default value is 0. You do not need to enter the weight information for the simple edition !!
</Td>
</Tr>
<Tr>
<Td align = "center" width = "40%"> Field name </td>
<Td align = "center" width = "40%" class = "trNoSimple"> weight (Single Point) </td>
<Td align = "center" width = "20%"> operation </td>
</Tr>
<Tr class = "items">
<Td align = "center">
<Input type = "text" name = "txtFieldName" value = "<% # Eval (" FieldRealName ") %>"/>
<Input type = "hidden" name = "txtFieldId" value = "<% # Eval (" Id ") %>"/>
</Td>
<Td class = "trNoSimple">
<Input type = "text" name = "txtFieldPoint" value = "<% # Eval (" Point ") %>"/>
</Td>
<Td align = "center"> <a href = "javascript: void (0);" class = "addBtn"> Add </a> <a href = "javascript: void (0); "class =" delBtn "> Delete </a> </td>
</Tr>
<Tr class = "temp">
<Td align = "center"> <input type = "text" name = "txtFieldName"/> </td>
<Td class = "trNoSimple"> <input type = "text" name = "txtFieldPoint" value = "0"/> </td>
<Td align = "center"> <a href = "javascript: void (0);" class = "addBtn"> Add </a> <a href = "javascript: void (0); "class =" delBtn "> Delete </a> </td>
</Tr>
</Table>

$. DynamicCon ({maxCount: 25 });

From BLOG