Home > Developer > Web Develop
<! DOCTYPE html>"Ltr"lang="ZH-CN">"UTF-8"/><meta name="Viewport"Content="Width=device-width"/><title>jquery table automatically adds </title><meta name="keywords"Content="jQuery, table, table, auto-add"/><meta name="Description"Content="jquery table automatically increases"/><meta name="Viewport"Content="Width=device-width"/><meta name="Copyright"Content="imsole.net"/><meta name="Designer"Content="Sole"/><meta name="Publisher"Content="imsole.net"/><meta name="author"Content="Sole"/><meta name="Robots"Content=" All"/><meta name="Distribution"Content="Global"/><style type="Text/css">table {width:900px; 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: -%; Height -%; padding:5px0; Border0none;} Table TD input:focus {Box-shadow:1px 1px 3px #ddd inset; outline:none;} Table TD a {display:block; width:30px;}</style><body> <table id="Count"> <tr><th> serial number </th><th> name </th><th> amount [usd]</th><th> Time </th ><th> Projects </th><th> units </th><th> remarks </th><th> actions </th></tr> <tr> <td>1</td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><a href="javascript:;" class="del"> Delete </a></td> </tr></table> <script src="Http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"></script> <script type="Text/javascript">$ (function () {/*This is a method, but not streamlined, but well understood, just like writing code for process. var otable = $ ("#count"), OTr = ', Oinput = ', Eele = '; Otable.on (' MouseOver ', function () {oTr = Otable.find (' tr '). Last (); Oinput = otr.find (' input '); Eele = Otr.clone (); Oinput.on (' click ', function () {var parent = $ (this). Parents (' tr '); if (otr.index () = = Parent.index ()) {otable.append (Eele); } }); });*/ //This is the second method, more concise, depends on the understanding of JQ. varotable = $ ("#count"), INum =1, Eele ="'; Otable.on ('Click', Function (e) {vartarget =E.target, OTr= $ (target). Closest ('TR'); if($ (target). Hasclass ('del') && Otr.index () >1) {INum--; varNextID = Otr.nextall ('TR'). Find ('td:eq (0)'); Nextid.each (function (i, ele) {$ (ele). Text ($ (ele). Text ()-1 ); }); Otr.remove (); return; }; if(Otr.index () = = Otable.find ('TR'). Last (). index ()) {INum++; Eele=Otr.clone (); Eele.find ('TD'). EQ (0). Text (INum); } otable.append (Eele); }); });</script> </body> JQuery table automatically increases
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
