CODEWITHSUNDEEP
jquery
user415772
user415772

Reputation: 431

How can I clone a row in a table without cloning the values of the input elements inside it?

I am trying to add a row to a table. I found that we can use the clone() method to duplicate an existing row. My table has two text inputs in it in two different <tr> elements. Cloning the last row is also duplicating the values in my text inputs, which I don't want? How can I clone the row without duplicating the values?

Here's what I have so far:

$("#table-1 tr:last").clone();

Upvotes: 5

Views: 8760

Answers (3)

Aadil Masavir
Aadil Masavir

Reputation: 69

The Given Above answer is Perfect but One thing is there missing the created rows dint not have the events that are aquired by previous created rows. so to clone identical rows with events we have to set property true .

see here......

  var newRow = $("#table-of-items     tr:last").clone(true).find(':input').val('').end();

  $("#table-of-items").append(newRow);

Note table-of-items is the name of table.

Upvotes: 1

user113716
user113716

Reputation: 322532

Try this:

var clone = $("#table-1 tr:last").clone().find('input').val('').end();
  • .clone() the last <tr>
  • .find() the <input> elements in the clone
  • set the .val() of the <input> elements to '',
  • call .end() so that the cloned <tr> is stored in the variable instead of the <input> elements.

If you intend to append it to the table immediately, add .insertAfter("#table-1 tr:last") to the end.

var clone = $("#table-1 tr:last").clone().find('input').val('').end().insertAfter("#table-1 tr:last");

Upvotes: 25

js1568
js1568

Reputation: 7032

You can add this line after your given line to set the values of the input fields to blank:

$('#table-1 tr:last input').attr('value','');

or just:

$('#table-1 tr:last input').val('');

Upvotes: 1

Related Questions