在打开类的情况下访问td

Question

我有一个footable 。当我单击加号以展开行

我想用jQuery访问黄色元素：

如果我检查元素，则单击后DOM看起来像这样：

<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>

我想做的是为colspan="2"设置td.someText并隐藏<th>Description</th>。但是我无法访问td.someText

我尝试使用

进行访问

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

但是他什么也没找到。实际上，alert($(row.$details).html());仅返回

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

是否知道单击后如何访问类someText的td？

这里是jsFiddle

---

注意：这不是Footable and capturing the expand row event的重复项。链接的问题是关于一般如何访问行的问题。问题是，如果我使用API​​中的方法选择它，则内容无法正确加载。这个问题帮助我到达了这里，但是并没有解决这里提出的问题。

Answer 1

expand.ft.row事件在添加dom内容之前触发。因此，如果您尝试读取行内容，则该事件不存在。

适合您情况的正确事件是expanded.ft.row，该事件会在添加内容后触发。

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

查看此演示 https://jsfiddle.net/bfmaredn/

我通过分析GitHub存储库https://github.com/fooplugins/FooTable/blob/V3/src/js/classes/FooTable.Row.js中的源代码发现了此事件

Answer 2

使用“异步功能”，尝试以下代码：

$(function() {
 $(".footable").footable();
 $('.footable').on('expand.ft.row', async function(e, ft, row) {
  alert($(await row.$details).html());
 });
});

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function