Click the table code in the last row to implement the row auto-Increment Effect.

Click the table code in the last row to implement the row auto-Increment Effect.

Click the table code in the last row to implement the row auto-Increment Effect:
All transactions are pursuing efficiency and humanization. Of course, the same is true for Web pages. If you can edit a data table and edit it to the last row, you can click here to automatically add a row, this is a more humane effect, you can save a bit of effort, the following is a piece of such code.
The Code is as follows:

 

<! DOCTYPE html> 
 
The above Code meets our requirements. Click the last row of the table to automatically Add a new row. The following describes the implementation process.
I. Code comments:
1. $ (function () {}). When the document structure is fully loaded, run the code in the function.
2. var oTable = $ ("# count") to get the object whose id attribute value is count. Here it is the table object.
3. iNum = 1. Declare a variable and assign the initial value to 1. In the future, + 1 can be added as the row number.
4. eEle = '', declare a variable to store row objects.
5. oTable. on ('click', function (e) {}), register a click event handler for the table object.
6. var target = e.tar get to get the clicked source object.
7. oTr = $ (target). closest ('tr ') to obtain the latest tr ancestor element.
8. f (oTr. index () = oTable. find ('tr '). last (). index () to check whether the last row is clicked.
9. iNum ++, iNum value plus 1.
10. eEle = oTr. clone () to clone the object of the current row.
11. eEle. find ('td '). eq (0). text (iNum), set the value of the first cell in the last row.
12. oTable. append (eEle) to add the last row of the table.
Ii. Related reading:
1. For more information about on (), see the on () method section of jQuery.
2.e.targetyou can read the event.tar get attribute section of jquery.
3. For details about the closest () function, refer to jQuery's closest () function.
4. For details about the index () function, refer to the index () method section of jQuery.
5. For more information about the find () function, see the find () method section of jQuery.
6. For more information about the last () function, see the last () method section of jQuery.
7. For details about the clone () function, refer to the clone () method section of jQuery.
8. For more information about the text () function, see the text () method section of jQuery.
9. For details about the append () function, refer to the append () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 11420.
For more information, see: http://www.softwhy.com/jquery/