Click the button to add or delete a line of instance code:
The site in the time to fill out the expression of a lot of choice space, and even add the content you need to add, for example, you can click the button to add an expression, if you do not need to click a button to delete, below is a brief introduction to how to achieve this effect.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Click the button to add or delete a line-ant tribe</title><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">$(function(){ varShow_count= -; varCount=$("Input:text"). Val (); varFin_count=0; $("#btn_addtr"). Click (function() {Fin_count=$("TR"). Length-1 if(Fin_count<Show_count) { $("Tr:eq (1)"). Clone (). AppendTo ("Table"); $("Tr:last TD Input:first"). Val (++count); } });});functiondeltr (obj) {varlength=$("TR"). length; if(Length<=2) {alert ("keep at least one row"); } Else{$ (arguments[0]). Parent (). remove (); }}</Script></Head><Body><inputtype= "button"ID= "BTN_ADDTR"value= "Add Line"><TableID= "DynamicTable"width= "The "Border= "0"cellspacing= "0"cellpadding= "0"> <TR> <TDHeight= "+"Align= "Center"bgcolor= "#CCCCCC">Id</TD> <TDAlign= "Center"bgcolor= "#CCCCCC">User name</TD> <TDAlign= "Center"bgcolor= "#CCCCCC">Type</TD> <TDAlign= "Center"bgcolor= "#CCCCCC">Other</TD> <TD></TD> </TR> <TR> <TDHeight= "+"Align= "Center"><inputtype= "text"size= "2"value= "1" /></TD> <TDAlign= "Center"><inputtype= "text"name= "username" /></TD> <TDAlign= "Center"><Selectname= "type"> <optionvalue= "1">Administrator</option> <optionvalue= "2">User</option> </Select></TD> <TDAlign= "Center"><inputtype= "text"name= "UserName2" /></TD> <TD><inputtype= "button"value= "Delete Line"onclick= "deltr (this)" /></TD> </TR></Table></Body></HTML>
The above code implements the effect we want, the ability to delete and or add lines, the following describes the implementation process.
I. Principle of implementation:
The principle is relatively simple, when the click Add button, will use the Appendto () function for the table to add a row, when the click on the Delete button, the parent element of the current button can delete the parent element, in fact, delete is the current row of the button, you can see the code comments.
two. Code comments:
1.$ (function () {}), when the document structure is fully loaded, then executes the code in the function.
2.var show_count=20, declares a variable and assigns a value to specify the maximum number of rows.
3.var count=$ ("Input:text"). Val (), the Value property of the first text box, which is the first ID value.
4.var fin_count=0, declares a variable and assigns an initial value of 0.
5.$ ("#btn_addtr"). Click (function () {}) to register the click event handler for the Add button.
6.fin_count=$ ("tr"). Length-1, assigns the total number of rows that are currently removed from the header row to the variable fin_count.
7. if (Fin_count<show_count), determine whether the current total row of header rows is less than the specified number of rows.
8.$ ("Tr:eq (1)"). Clone (). AppendTo ("table"), clone the first row and append it to the end of the table.
9.$ ("Tr:last TD Input:first"). Val (++count); Set the ID of the line.
10.function deltr (obj) {}, this function is used to delete a row, and the argument is an object passed.
11.var length=$ ("tr"). Length, gets the total number of rows.
12.if (length<=2) {alert ("Keep at least one line")}, if the total number of rows is less than or equal to 2, the hint pops up.
13.$ (Arguments[0]). Parent (). Remove () (), delete the parents of the parent element of the current button, which is the current row.
Special Note: Arguments[0] is the first parameter passed by the function, which is the button object this.
three. Related reading:
1.$ ("Input:text") can be found in jquery's: Text selector section.
the 2.val () function can be found in the section of the Val () method of jquery .
3.$ ("Tr:eq (1)") can refer to the jquery: eq () selector section.
the 4.clone () function can be found in the section of the Clone () method of jquery .
the 5.appendTo () function can be found in the AppendTo () method section of jquery .
6.$ ("Tr:last TD Input:first") can be found in jquery: Last selector and jquery: First selector section.
7.arguments refer to The Arguments object section of JavaScript .
the 8.parent () function can be found in the section of the parent () method of jquery .
the 9.remove () function can be found in the Remove () method section of jquery .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=10596
For more information, refer to: http://www.softwhy.com/jquery/
Click the button to add or delete a line of instance code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
