Child Row - How to select Parent Row

Child Row - How to select Parent Row

redbaronredbaron Posts: 12Questions: 6Answers: 1
edited June 2017 in DataTables 1.10

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.

This question has an accepted answers - jump to answer

Answers

  • HPBHPB Posts: 73Questions: 2Answers: 18
    Answer ✓

    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);
    
  • redbaronredbaron Posts: 12Questions: 6Answers: 1

    That is what I needed. Thank you!

  • marcimarci Posts: 1Questions: 0Answers: 0

    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"]’);
    
  • allanallan Posts: 48,281Questions: 1Answers: 6,967 Site admin

    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

  • stolstol Posts: 8Questions: 1Answers: 1

    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
    
Sign In or Register to comment.