Add a row below a specific row

Question

I want to add a row below another but it is added at the end.

I would like it to be added as follows. Is there a way to achieve this?

user_519413 · Answer

The parent of tr#info is the table itself. Therefore when you append() to that table the content is placed at the end.

To do what you require select #info and use after() to insert the content directly after the target:

jQuery($ => {
  $('.add-row').on('click', () => {
    $('#info').after('Data3Data4');
  });
});

table { width: 200px; }
th { width: 100px; }


  
    A
    B
  
  
    Data1
    Data2
  
  
    C

Also note in the example above that I moved the inline CSS to an external stylesheet and the inline JS event handler to an unobtrusive one attached via jQuery. Your HTML should ideally contain no code other than HTML.

user_2056802 · Answer

You should use jQuery after() function - https://api.jquery.com/after/

Example:

Add a row below a specific row

2 Answers