<style>html{Background:none;} table{width:100%; border:1px solid #CCC; border-top:none; border-left:none;} table TD, Table th{text-align:left;border- top:1px solid #cccccc; border-left:1px solid #cccccc; padding:10px;height:50px;font-size:16px;} Table TD a{Color: #428bca;} table TD span{width:30%; display:inline-block; height:30px; line-height:30px;} table TD span input{margin-top:2px;} table th{min-width:80px; background: #428bca; font-weight:200; color: #fff;}. text{padding:10px; margin:10px; height:auto; width:90%;}. btn{padding:6px 15px}</style><div class= "Detail" > <div style= "border:2px; Border-color: #00CC00; margin-left:10%; margin-top:20px "> <input type=" button "id=" but "value=" add "/> </div> <table id=" tab "CLA ss= "tab" width= "80%" align= "center" cellpadding= "0" cellspacing= "0" > <tr> <td width= "20%" ; Serial number </td> <td> amount </td> <td> validity </td> <td> description </td> <td> action </td> </ tr> </table></div><script src= "Http://code.jquery.com/jquery-1.4.1.min.js" ></script> <script type= "Text/javascript" >//Table added $ (document). Ready (function () {//<tr/> Center $ ("#tab TR" ). attr ("Align", "center"); Added <tr/> $ ("#but"). Click (function () {var _len = $ ("#tab tr"). Length; $ ("#tab"). Append ("<tr id=" +_len+ "align= ' center ' >" + "<td>" +_len+ "</td>" + "<td><input type= ' text ' name= ' amount_money[] '/></td>" + "<td><input type= ' text ' name= ' promotion_effective_day[] '/> Day </td>" + "<td><input type= ' text ' name= ' desc[] '/></td>" + "<td>< a href=\ ' #\ ' onclick=\ ' deltr ("+_len+") \ ' > Delete </a></td> ' + ' </tr> '); })})//delete <tr/> var deltr =function (index) {var _len = $ ("#tab tr"). Length; $ ("tr[id= '" "+index+" '] "). Remove ();//delete current line for (Var i=index+1,j=_len;i<j;i++) {var nexttx Tval = $ ("#desc" +i). Val (); $ ("tr[id=\ '" +i+ "\ ']"). ReplaceWith ("<tr id=" + (i-1) + "align=" Center > " + "<td>" + (i-1) + "</td>" + "<td><input type= ' text ' name= ' amount_money[] ' /></td> "+" <td><input type= ' text ' name= ' promotion_effective_day[] '/> </td> "+" <td><input type= ' text ' name= ' desc[] '/></td> ' + "<td><a href=\ ' #\ ' onclick=\ ' deltr (" + (i-1) + ") \ ' > Delete </a></td>" + "</tr>"); }}</script>
(17) jquery dynamic creation, delete table row