Build table using partial view with Ajax requests

Question

I need to dynamically create (insert) a new table row every time user presses button (using Ajax). My partial view structure:

    <tr>
         <td><td>
         <td><td>
         ...
    </tr>

When I need insert new row at the end I can do something like this:

    element_table.innerHTML += ajax_data

But what I must do when I need to place it between other rows?

I can return only [td] elements and wrap them in [tr] clientside created element (tr.innerHTML = ajax_data) but I don't think this is a good idea.

Any ideas?

Are there any common practises?

Answer 1

The easiest way is to use jQuery with your Ajax response. It can be as simple as

$('#table').append(response) 

to append a row. It's also possible to insert the new row at a specific index:

$('#my_table > tbody > tr').eq(index).after(response);

Note that index is 0 based.