CODEWITHSUNDEEP
jquery
Belmark Caday
Belmark Caday

Reputation: 1683

How to append after a specific id in jquery

Guys I have a table and I want to dynamically append a row with column inside it but not at the end, I want it to be appended after a specific id of a row. How to do that?

$('#add-another-file').live('click', function() {
   $('#to-upload-table').append('<tr><td><input type="file" name="file-upload" id="file-upload" ></td></tr>');     
});

That is my code, but it will append the new element after the last row.

Here's my html where i want the new row to be appended:

<table width="100%" style="border-collapse: separate;" id="to-upload-table">

        <tr>
            <td>
                <input type="file" id="file_upload" name="file_upload">
            </td>
        </tr>

        <tr>
            <td>
                <input type="file" id="file_upload" name="file_upload">
            </td>
        </tr>
        <tr>
            <td>
                <input type="file" id="file_upload" name="file_upload">
            </td>
        </tr>
        <tr>
            <td>
                <input type="file" id="file_upload" name="file_upload">
            </td>
        </tr>

        <tr align="right">
            <td>
                <input type="button" id="add-another-file" name="add-another-file" value="Add another file" >
            </td>
        </tr>
        <tr align="right">
            <td>
                <a href="#" id="single-file">Single-file </a>
            </td>
        </tr>
        <tr>
            <td align="right">
                <input type="button" id="upload_file" value="Upload">
            </td>
        </tr>
    </table>

As you can see, there are three buttons on the last part of the table, I want the new row to be appended just before those three buttons. After those file input types

Upvotes: 0

Views: 1670

Answers (2)

StackSlave
StackSlave

Reputation: 10627

You could use the .eq() with .after() if you don't have the id.

$('#add-another-file').live('click', function() {
  $('#to-upload-table tr').eq(Number Here).after('<tr><td><input type="file" name="file-upload" id="file-upload" ></td></tr>');     
});

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Use jQuery After :

$('targeted row to append after').after('<tr><td><input type="file" name="file-upload" id="file-upload" ></td></tr>');

You can check the list of DOM insertion methods here : http://api.jquery.com/category/manipulation/

Upvotes: 2

Related Questions