访问 td 并打开行上的类答案

【问题标题】：Access td with class on row open访问 td 并打开行上的类
【发布时间】：2019-08-15 02:12:03
【问题描述】：

我有一个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>

我想做的是为td.someText设置colspan="2"并隐藏<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 中的方法选择它，则内容未正确加载。这个问题帮助我到达这里，但没有解决这里提出的问题。

【问题讨论】：

当你点击展开内容时不存在。它是在你点击它之后添加的。所以如果你等待很短的时间你可以获得内容。但最好的方法是使用内容加载事件（如果有）。 jsfiddle.net/dbc1fzvw/1
@MadhawaPriyashantha omgosh 谢谢。您如何使用内容加载？我认为等待 200 毫秒可能并不总是可靠的？
是的，它可能需要更少或更多。所以你应该检查在展开事件之后是否有任何可用的 api 方法。
我刚看了github源码，找到了正确的事件

标签： javascript footable

【解决方案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 的源代码发现了这个事件

【讨论】：

【解决方案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

【讨论】：