jQuery clone table row and make empty

Quick jQuery snippet to clone a table row (and make empty) appended to a table.


var clonedRow = $('tbody tr:first').clone();
clonedRow.find('input').val('');
$(this).prev().find($('table tbody')).append(clonedRow);

Frequently Asked Questions (FAQs) about jQuery Clone Table Row

How can I clone a table row using jQuery?

Cloning a table row using jQuery is quite simple. You can use the clone() method to duplicate the row. Here’s a basic example:

$("#tableID tbody").append($("#tableID tbody tr:last").clone());
In this example, the last row of the table with the ID “tableID” is cloned and appended to the table body.

Can I clone a table row and clear its content?

Yes, you can clone a table row and clear its content. After cloning the row, you can use the find() method to select the child elements and then clear their content. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.find("input").val("");
$("#tableID tbody").append(clonedRow);
In this example, the input fields in the cloned row are cleared before the row is appended to the table body.

How can I clone a table row and change its ID?

You can change the ID of a cloned row by using the attr() method. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.attr("id", "newID");
$("#tableID tbody").append(clonedRow);
In this example, the ID of the cloned row is changed to “newID” before the row is appended to the table body.

Can I clone a table row and add it to another table?

Yes, you can clone a table row and add it to another table. You just need to select the other table when appending the cloned row. Here’s an example:

var clonedRow = $("#tableID1 tbody tr:last").clone();
$("#tableID2 tbody").append(clonedRow);
In this example, the last row of the table with the ID “tableID1” is cloned and appended to the table with the ID “tableID2”.

How can I clone a table row and modify its content?

You can modify the content of a cloned row by using the text() or html() method. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.find("td:first").text("New Content");
$("#tableID tbody").append(clonedRow);
In this example, the content of the first cell in the cloned row is changed to “New Content” before the row is appended to the table body.

Can I clone a table row and remove some of its cells?

Yes, you can clone a table row and remove some of its cells. You can use the remove() method to delete the selected cells. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.find("td:last").remove();
$("#tableID tbody").append(clonedRow);
In this example, the last cell in the cloned row is removed before the row is appended to the table body.

How can I clone a table row and add new cells to it?

You can add new cells to a cloned row by using the append() method. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.append("<td>New Cell</td>");
$("#tableID tbody").append(clonedRow);
In this example, a new cell with the content “New Cell” is added to the cloned row before the row is appended to the table body.

Can I clone a table row and change its class?

Yes, you can change the class of a cloned row by using the addClass() or removeClass() method. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.removeClass("oldClass").addClass("newClass");
$("#tableID tbody").append(clonedRow);
In this example, the class “oldClass” is removed from the cloned row and the class “newClass” is added before the row is appended to the table body.

How can I clone a table row and change its style?

You can change the style of a cloned row by using the css() method. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.css("background-color", "yellow");
$("#tableID tbody").append(clonedRow);
In this example, the background color of the cloned row is changed to yellow before the row is appended to the table body.

Can I clone a table row and add an event handler to it?

Yes, you can add an event handler to a cloned row by using the on() method. Here’s an example:

var clonedRow = $("#tableID tbody tr:last").clone();
clonedRow.on("click", function() {
alert("Cloned row clicked!");
});
$("#tableID tbody").append(clonedRow);
In this example, a click event handler is added to the cloned row before the row is appended to the table body. When the cloned row is clicked, an alert box with the message “Cloned row clicked!” is displayed.