CODEWITHSUNDEEP
jqueryadditiondynamicrows
Ullas Prabhakar
Ullas Prabhakar

Reputation: 416

add row to table from onload jquery

I have the following table

<table id="invoice">
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      <th><input type="button" id="addnew" name="addnew" value="Add Row"  />
      </th>
    </tr>
    <tr id="id1">
      <td><input id="quantity1" name="quantity[]" tabindex="1" type="text" value=""  /></td>
      <td><select id="rate1" name="rate[]" tabindex="2" value="">
          <option value="">SELECT</option>
          <option value="1">ONE</option>
          <option value="2">TWO</option>
        </select></td>
      <td><input  id="remove1"  name="remove[]"  tabindex="3"  type="button" value="Remove Row"class="remove"/></td>
    </tr>
  </table>

I am able to add row using the following script

var next = 2;
function addrow(table,add)
{
  $(add).bind('click', function() {   
    var $last = $(table + ' tr:last');
    var last_row = $last.clone();  
    $(last_row).find(":input").each(function() {
      var store = $(this).attr("id");
      var new1 = store.replace(/1/, next);
      $(this).attr("id",new1);
    });
    last_row.appendTo($(table))
    $(table+" tr:last").hide().fadeIn('slow');
     next++;  
  });
}
addrow('#invoice','#addnew');

Demo

the above script clones the 2nd row and append to the table which is actually required. But the problem is if user inputs some value in the 2nd row of the text box and after that clicks addrow, it replicates this in the new row with the values.To overcome this i just chnges the script.

SO i changed the script to the following

var next = 2;
function addrow(table,add)
{
  var $last = $(table + ' tr:last');///changed this line
  var last_row = $last.clone(); /// changed this line  
  $(add).bind('click', function() {   

    $(last_row).find(":input").each(function() {
      var store = $(this).attr("id");
      var new1 = store.replace(/1/, next);
      $(this).attr("id",new1);
    });
    last_row.appendTo($(table))
    $(table+" tr:last").hide().fadeIn('slow');
    next++;  
  });
}

Demo

This adds only one row,it just changes the last row,but not add more than new row.

Can any one please correct this second script as this works perfect for my project as many other scripts are associated with this.

Upvotes: 0

Views: 2288

Answers (1)

Raynos
Raynos

Reputation: 169501

var next = 2;

function addrow(table, add) {
    var $last = $(table + ' tr:last'); ///changed this line
    var last_row = $last.clone(); /// changed this line  
    $(add).bind('click', function() {
        var localClone = last_row.clone(); // you want to clone the DOM row.
        $(localClone).find(":input").each(function() {
            var store = $(this).attr("id");
            var new1 = store.replace(/1/, next);
            $(this).attr("id", new1);
        });
        localClone.appendTo($(table));
        $(table + " tr:last").hide().fadeIn('slow');
        next++;
    });
}

You want to create a new clone / DOM row each time you click it. Otherwise you just keep moving one row around.

So we have our original last row to clone at the start and we keep cloning the "clean row". The clean row stays clean because last_row is never added to the DOM.

@patrickdw mentioned another option which is to keep cloning the last row inside the click function but clearing the data of the row. Depending on what your row is like cleaning it up each time might be worthwhile.

The nice thing about @patrickdw method is that you can clean up some data but keep other data. This might be useful for you.

Upvotes: 2

Related Questions