克隆没有任何值的最后一个表行

Question

I am working on a update feature. In this page I have a table with multiple textfields. An example like

<input class="form-control" type="text" name="derivable[]" value="2">

On button click I need to add a new row.

$("#main-table").each(function () {
    let tds = '<tr>';
    jQuery.each($('tr:last td', this), function () {
            tds += '<td class="text-center">' + $(this).html() + '</td>';

It is adding a new row but $(this).html() is also copying value = 2 from last row.

Is it possible to get $(this).html() without value?

Answer 1

I don't think that is directly possible. You should inspect each element / property of $(this) to build the new object.

I will suggest copy the complete object as you are doing and remove the value later.

Something like (not tested code):

$("#main-table").each(function () {
    let tds = '<tr>';
    jQuery.each($('tr:last td', this), function () {
            tds += '<td class="text-center">' + $(this).html() + '</td>';
            [ ... ]   
    }); 
    jQuery.each($('tr:last td', this), function () {
        $(this).removeAttr('value');
    });

But i will also think if the copy process is need at all. If your inputs are always the same, why not hardcode how they are and avoid the copy. Just insert.

And also, I usually prefer not to work with the html representation but with the jQuery objects, where you can use clone to get a new instance. Having the instance you call removeAttr on it, without having to use regular expressions that are more difficult to debug.