jQuery Clone table row

Question

I have a table with an Add button on the end  When you click this button I want a new table row to be created underneath the current one  I also want the input fields on this row to be blank  I am trying to do this using  clone   but it clones all the rows on the page  Please help  Thanks  Script     input tr clone add            live  click   function                    this  closest   tr clone                        clone                        insertAfter   tr clone                  HTML   lt table width  100   border  0  cellspacing  0  cellpadding  0  id  table-data  gt   lt tr gt   lt td gt Name lt  td gt   lt td gt Location lt  td gt   lt td gt From lt  td gt   lt td gt To lt  td gt   lt td gt Add lt  td gt   lt  tr gt   lt tr class  tr clone  gt   lt td gt  lt input type  text  autofocus placeholder  who  name  who   gt  lt  td gt   lt td gt  lt input type  text  autofocus placeholder  location  name  location   gt  lt  td gt   lt td gt  lt input type  text  placeholder  Start Date  name  datepicker start  class  datepicker  gt  lt  td gt   lt td gt  lt input type  text  placeholder  End Date  name  datepicker end  class  datepicker  gt  lt  td gt   lt td gt  lt input type  button  name  add  value  Add  class  tr clone add  gt  lt  td gt   lt  tr gt   lt  table gt  lt  --  table table-data -- gt

User · Answer

The code below will clone last row and add after last row in table:

var $tableBody = $('#tbl').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();

$trLast.after($trNew);

Working example : http://jsfiddle.net/kQpfE/2/

User · Answer

Your problem is that your insertAfter    insertAfter   tr clone     inserts after every  tr clone      the matched set of elements will be inserted after the element s  specified by this parameter    You probably just want to use after on the row you re duplicating  And a little  find   text   val     will clear the cloned text inputs  something like this   var  tr        this  closest   tr clone    var  clone    tr clone     clone find   text   val       tr after  clone     Demo  http   jsfiddle net ambiguous LAECx  or for a modern jQuery  http   jsfiddle net ambiguous LAECx 3274   I m not sure which input should end up with the focus so I ve left that alone

User · Answer

Try this code   I used the following code for cloning and removing the cloned element   i have also used new class  newClass  which can be added automatically with the newly cloned html  for cloning         tr clone add   live  click   function         var  tr        this  closest   tr clone        var newClass  newClass       var  clone    tr clone   addClass newClass        clone find   text   val           tr after  clone         for removing the clone element       tr clone remove   live  click   function       Once remove button is clicked         newClass last   remove      Remove field html     x--    Decrement field counter       html is as followinng   lt tr class  tr clone  gt                          lt  --  lt td gt 1 lt  td gt -- gt                           lt td gt  lt input type  text  class  span12  gt  lt  td gt                           lt td gt  lt input type  text  class  span12  gt  lt  td gt                           lt td gt  lt input type  text  class  span12  gt  lt  td gt                           lt td gt  lt input type  text  class  span12  gt  lt  td gt                           lt td gt  lt input type  text  class  span10  readonly gt                           lt span gt  lt a href  javascript void 0    class  tr clone add  title  Add field  gt  lt span gt  lt i class  icon-plus-sign  gt  lt  i gt  lt  span gt  lt  a gt   lt a href  javascript void 0    class  tr clone remove  title  Remove field  gt  lt span style  color   D63939   gt  lt i class  icon-remove-sign  gt  lt  i gt  lt  span gt  lt  a gt   lt  span gt   lt  td gt   lt  tr gt

User · Answer

Try this variation       tr clone add   live  click   CloneRow    function CloneRow           this  closest   tr clone   clone   insertAfter   tr clone last

User · Answer

Is very simple to clone the last row with jquery pressing a button   Your Table HTML    lt table id  tableExample  gt       lt thead gt           lt tr gt               lt th gt ID lt  th gt               lt th gt Header 1 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Line 1 lt  td gt           lt  tr gt       lt  tbody gt       lt tfoot gt           lt tr gt               lt td colspan  2  gt  lt button type  button  id  addRowButton  gt Add row lt  button gt  lt  td gt           lt  tr gt       lt  tfoot gt   lt  table gt    JS     document  on  click     addRowButton   function         var table       tableExample            lastRow   table find  tbody tr last            rowClone   lastRow clone         table find  tbody   append rowClone         Regards

User · Answer

Try this   HTML   lt  -- Your table -- gt   lt table width  100   border  0  cellspacing  0  cellpadding  0  id  table-data  gt        lt thead gt           lt tr gt               lt th gt Name lt  th gt               lt th gt Location lt  th gt               lt th gt From lt  th gt               lt th gt To lt  th gt               lt th gt Add lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt  lt input type  text  autofocus placeholder  who  name  who   gt  lt  td gt               lt td gt  lt input type  text  autofocus placeholder  location  name  location   gt  lt  td gt               lt td gt  lt input type  text  placeholder  Start Date  name  datepicker start  class  datepicker  gt  lt  td gt               lt td gt  lt input type  text  placeholder  End Date  name  datepicker end  class  datepicker  gt  lt  td gt               lt td gt  lt input type  button  name  add  value  Add  class  tr clone add  gt  lt  td gt           lt  tr gt       lt tbody gt   lt  table gt    lt  -- Model of new row -- gt   lt table id  new-row-model  style  display  none  gt        lt tbody gt           lt tr gt               lt td gt  lt input type  text  autofocus placeholder  who  name  who   gt  lt  td gt               lt td gt  lt input type  text  autofocus placeholder  location  name  location   gt  lt  td gt               lt td gt  lt input type  text  placeholder  Start Date  name  datepicker start  class  datepicker  gt  lt  td gt               lt td gt  lt input type  text  placeholder  End Date  name  datepicker end  class  datepicker  gt  lt  td gt               lt td gt  lt input type  button  name  add  value  Add  class  tr clone add  gt  lt  td gt           lt  tr gt       lt tbody gt   lt  table gt    Script     input tr clone add   live  click   function        var new row       new-row-model tbody   clone            table-data tbody   append new row html

User · Answer

Here you go      table   delegate    tr clone add    click   function          var thisRow      this   closest   tr    0          thisRow   clone   insertAfter  thisRow   find   input text    val              Live demo  http   jsfiddle net RhjxK 4     Update  The new way of delegating events in jQuery is     table  on  click     tr clone add   function

[jquery] jQuery Clone table row

Examples related to jquery

Examples related to clone