JQuery replace two table rows based on the data attribute of one

Question

I have a table in which I have editable data. Each 'editable' section covers two table rows.

<table>
    <tr data-doc_id2='doc_id2'>
    </tr>
    <tr></tr>
    <tr data-doc_id2='doc_id2'>
    </tr>
    <tr></tr>
    <tr data-doc_id2='doc_id2'>
    </tr>
    <tr></tr>
    <tr data-doc_id2='doc_id2'>
    </tr>
    <tr></tr>
</table>

(Please note I haven't put the <td></td> in....)

My jQuery so far is as follows. This will replace the first row with the relevent ID. I am having trouble selecting the second row... next() seems to be looking for the next row that has the ID.

 var new_row="<tr data-doc_id2='"+doc_id+"'>
    <td>"+doc_name+"</td>
    <td>"+first_ins4+"</td>
    <td>"+job_price4+"</td>
    <td>"+tender4+"</td>
    <td><a class='edit_docs' href='javascript:void(0);'>Edit</a> | <a class='del_doc' href='javascript:void(0);'>Delete</a></td>
 </tr>";
    var new_row2="<tr><td colspan='4'>"+second_ins4+"</td><td></td></tr>";

    var row_to_change=$("tr:[data-doc_id2='"+doc_id+"']");
    $(row_to_change).replaceWith(new_row);

You've swapped the - and _, added a 2, and prepended a : to the selector, but that shouldn't select the first row either. — pimvdb
– pimvdb, Commented Sep 22, 2012 at 14:50
Sorry - the html was more of an example html as the original table is dynamically generated... I will look at this — Sideshow
– Sideshow, Commented Sep 22, 2012 at 14:56

Sideshow · Accepted Answer · 2012-09-22 15:23:40Z

2

 var row_to_change=$("tr:[data-doc_id2='"+doc_id+"']");
 $(row_to_change).closest('tr').next('tr').remove();
 $(row_to_change).replaceWith(new_row);

Instead of having new_row and new_row2 I stuck the HTML together in new_row variable replacing one of the rows with the two new rows then removed the next row by using a standard selector. Clumsy but works.

answered Sep 22, 2012 at 15:23

Sideshow

1,3616 gold badges28 silver badges50 bronze badges

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

1 Comment

pimvdb Over a year ago

If row_to_change is a <tr>, then you don't need .closest("tr").

Collectives™ on Stack Overflow

JQuery replace two table rows based on the data attribute of one

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related