Child Row - How to select Parent Row

redbaron

I am using a nested child row for detailed information. I have a need to refresh the data for the parent row, and cannot figure out how to properly select the parent my javascript.

This is the javaScript that runs when a span is clicked within the child row:

// Add event listener for refreshing transaction queue
            $('#table tbody').on('click', 'span.trans-in-queue-lineitem', function () {
                var tr = $(this).closest('tr');
                var tr2 = tr.prev('tr');

                var row = table.row(tr2);
            });

My selector for tr2 is what is giving me trouble.

HPB

Without a testcase with your specific child row implementation this is just going to be a guess.

Going from the example this will work:

var tr = $(this).closest('tr[role="row"]');
var row = table.row(tr);

redbaron

That is what I needed. Thank you!

marci

If using with collapse however, you’ll need to expand that a bit I think...

var tr = ($(this).closest('tr').hasClass('child’)) ? $(this).closest('tr').prevAll('.parent’) : $(this).closest('tr[role="row"]’);

allan

That role='row' was an accessibility workaround for a bug in Safari and Chrome years ago. Its proven to be very useful though - its staying .

Allan

stol

The suggestions above did not work for me. (I believe because .closest() goes up the DOM tree and the tr with the span that is clicked is in a sibling tr to the parent row.)
This is what did work:

var tr = $(this).closest('tr').parents('tr');  //this is the top tr of the child row
var prevtr = tr.prev('tr')[0];  //this is the row of the parent data