how to clone a tr with it's td inside it with jquery

Question

I am using this ajax success to clone a tr with its td inside it:

success: function(response){
    var file = $(".drop-file").clone();
    file.html(response);        
    $('.myfiles').append(file);
}

This is my html structure:

<tr class="drop-file">
    <td class="myFiles"></td>
</tr>

At this moment, this is the output:

<tr class="drop-file">
    <td class="myFiles">
        <tr class="filename">1.png</tr>
        <tr class="filename">2.png</tr>
        <tr class="filename">3.png</tr>
    </td>
</tr>

But it should be like this:

<tr class="drop-file">
    <td class="myFiles">1.png</td>
    <td class="myFiles">2.png</td>
    <td class="myFiles">3.png</td>
</tr>

How can i achieve that?

You're appending a `` to a ``. That makes no sense. The parent of a `` has to be the `` (or a section of a table like ``). — Barmar, Jan 19 '19 at 19:35
no only text. Php echo looks like this: ` $file = $_FILES['dropImage']['name']; echo $file;` — Jack Maessen, Jan 19 '19 at 19:35
I don't see how you're getting the result you claim you're getting. It should produce `1.png` — Barmar, Jan 19 '19 at 19:37
Possible duplicate of [jQuery Clone table row](https://stackoverflow.com/questions/7961900/jquery-clone-table-row) — miken32, Jan 19 '19 at 20:40

score 0 · Answer 1 · answered Jan 19 '19 at 19:40

0

You shouldn't clone the <tr>, just clone one of the .myFiles elements, and append it to .drop-files.

var file = $(".myFiles").clone();
file.html(response);        
$('.drop-files').append(file);

answered Jan 19 '19 at 19:40

Barmar

741,623
53
500
612

In this case, only the `td` will be cloned. But a complete row with it's `td` inside it should be clonded – Jack Maessen Jan 19 '19 at 19:52
Please edit the question, and show what should be in the DOM before and after the AJAX request. Because it's not really clear. When you do `file.html(response)`, that just puts a single filename into the element that you cloned. If you clone a ``, you need something like `.html("" + response + "")` because a TR has to contain TD elements. And why are you cloning a row along with its TRs if you're just going to overwrite them? – Barmar Jan 19 '19 at 22:38

how to clone a tr with it's td inside it with jquery

1 Answers1