Add table row with jQuery before button

Question

I have this table, and I want to add Rows up the button, in the same rowId. For example, on clicking the Add Row 1 button, i want to add a row in row1, under "Some content 1", and so on.

  <table id="table1">
       <thead>
         <th>Heading 1</th>
         <th>Heading 2</th>
       </thead>
       <tbody>
         <tr id="row1">
            <td>Some content 1<td>
            <td><button id="addButton1">Add Row 1</button><td>
         </tr>
         <tr id="row2">
            <td>Some content 2<td>
            <td><button id="addButton2">Add Row 2</button><td>
         </tr>
       <tbody>
    </table>

This is the script I use so far:

$("#addBtn").on("click", function () {
    $("#table1 tbody").append("<tr><td>1</td><td>1</td></tr>");

});

This is adding rows at the end of the table. How can I add rows in between, in the same section, using jQuery?

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-02 13:14:07Z

2

Try to use .closest() along with .after() to achieve what you want, and you should use id starts with selector in this context or you can add one common class for all of that buttons and use that as a selector.

$("[id^=addButton]").on("click", function () {
    $(this).closest('tr').after("<tr><td>1</td><td>1</td></tr>");
});

Side Note: I have edited some of your ugly html in order to make your code valid

DEMO

edited Jun 2, 2014 at 13:14

answered Jun 2, 2014 at 13:08

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suresh Ponnukalai · Accepted Answer · 2014-06-02 13:24:29Z

1

You can do like this.

$("#table1 button").on("click", function () {    
$(this).parents('tr').after("<tr><td>1</td><td>1</td></tr>");
});

answered Jun 2, 2014 at 13:24

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Collectives™ on Stack Overflow

Add table row with jQuery before button

2 Answers 2

DEMO

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related