Click the last line to implement the table code for the row self-increment effect:
Now any business is the pursuit of efficiency and humanization, of course, Web page effect is also the case, if a table can edit the data, edit to the last line, click can automatically add a row, this is a more humane effect, you can avoid a trace of hardship, the following share a code like this.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Table{width:800px;margin:50px Auto;Border-collapse:collapse;border-spacing:0;}Table tr, table th, table TD{Border:1px solid #ddd;font-size:12px;}Table TR Td:first-child{width:30px;text-align:Center;}table TD Input{width:100%;Height:100%;padding:5px 0;Border:0 None;}table TD Input:focus{Box-shadow:1px 1px 3px #ddd inset;Outline:None;}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">$(function(){ varotable= $("#count"), INum= 1, Eele= "'; Otable.on ('Click', function(e) {varTarget=E.target, OTr=$ (target). Closest ('TR'); if(Otr.index ()==Otable.find ('TR'). Last (). index ()) {INum++; Eele=Otr.clone (); Eele.find ('TD'). EQ (0). Text (INum); } otable.append (Eele); });});</Script>[/size][size=2]</Head><Body><TableID= "Count"> <TR> <th>Serial number</th> <th>Name</th> <th>Amount [USD]</th> <th>Time</th> <th>Project</th> <th>Unit</th> <th>Note</th> </TR> <TR> <TD>1</TD> <TD><inputtype= "text" /></TD> <TD><inputtype= "text" /></TD> <TD><inputtype= "text" /></TD> <TD><inputtype= "text" /></TD> <TD><inputtype= "text" /></TD> <TD><inputtype= "text" /></TD> </TR></Table></Body></HTML>
The above code to achieve our requirements, click the last line of the table, you can automatically add new lines, the following describes its implementation process.
A. Code Comment:
1.$ (function () {}), when the document structure is fully loaded and then executes the code in the function.
2.var otable = $ ("#count"), gets an object with the id attribute value of Count, which is the Table object.
3.iNum = 1, declare a variable and assign an initial value of 1, and then each additional row will be +1 as the line number.
4.eEle = ', declares a variable to store the Row object.
5.otable.on (' click ', Function (e) {}), register the Click event handler function for the Table object.
6.var target = e.target, gets the source object that was clicked.
7.oTr = $ (target). Closest (' tr ') to obtain the nearest TR ancestor element.
8.f (Otr.index () ==otable.find (' tr '). Last (). index ()) to determine whether the clicked is the final line.
the value of 9.inum++,inum plus 1.
10.eEle = Otr.clone (), clones the current line object.
11.eele.find (' TD '). EQ (0). Text (INum), set the value of the first cell in the last row.
12.otable.append (Eele), adds a row for the last table.
two. Related reading:
1.on () refer to the section on the On () method of jquery .
2.e.target can refer to the Event.target Properties section of jquery .
the 3.closest () function can be found in the closest () function section of jquery .
the 4.index () function can be found in the index () method section of jquery .
the 5.find () function can be found in the section of the Find () method of jquery .
the 6.last () function can be found in the last () method section of jquery .
the 7.clone () function can be found in the section of the Clone () method of jquery .
the 8.text () function can be found in the section of the text () method of jquery .
the 9.append () function can be found in the Append () method section of jquery .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11420
For more information, refer to: http://www.softwhy.com/jquery/
Click the last line to achieve the table code of the row self-increment effect
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
