Search code examples
javascriptfootable

Access td with class on row open

I have a footable . When I click on the plus to expand a row

enter image description here

I want to access with jQuery the yellow elements:

enter image description here

If I inspect the element the DOM looks like that after the click:

<table class="footable-details table">
   <tbody>
      <tr><th>
        DOB (hide)
      </th><td style="display: table-cell;">
        10/16/1977
      </td></tr><tr><th>
       Description
      </th><td class="someText" style="display: table-cell;">
        Some description
      </td></tr>
   </tbody>
 </table>

What I would like to do, is to set colspan="2" for td.someText and hide the <th>Description</th>. But I can't access td.someText

I tried to access it with

$('.footable').on('expand.ft.row', function(e, ft, row){
     $(row.$details).find('td.someText'));    
});

but he does not find anything. In fact, alert($(row.$details).html()); only returns

<td colspan="4">
    <table class="footable-details table">
        <tbody>
        </tbody>
    </table>
</td>

Any idea how to access the td with class someText after click?

Here is a jsFiddle

Note: This is not a duplicate of Footable and capturing the expand row event. The linked question is about how to access a row in general. This question is if I select it with the method from the API the content is not loaded correctly. The question helped me to get here, but does not to solve the here presented issue.

Solution

  • expand.ft.row event fires before it appends the dom content.so if you try to read the row content, it's not there.

    The correct event for your case is expanded.ft.row which fires after appending the content.

      $('.footable').on('expanded.ft.row', function(e, ft, row) {
    alert($(row.$details).html());
  });

    check this demo https://jsfiddle.net/bfmaredn/

    I found this event by analyzing the source code from GitHub repository https://github.com/fooplugins/FooTable/blob/V3/src/js/classes/FooTable.Row.js