javascript - 访问 td with class on row open

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