在打开的行上使用 class 访问 td

Question

我有一个可足。当我点击加号展开一行时

我想使用 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());只有returns

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

知道点击后如何使用 class someText 访问 td 吗？

这是一个jsFiddle

注意：这不是的副本。链接的问题是关于如何访问一般的行。这个问题是如果我 select 使用 API 中的方法内容未正确加载。这个问题帮助我来到这里，但并没有解决这里提出的问题。

Answer 1

使用"async function"，试试下面的代码：

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

Answer 2

expand.ft.row 事件在附加 dom content.so 之前触发，如果您尝试读取行内容，它不存在。

您的案例的正确事件是 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

中的源代码发现了这个事件

在打开的行上使用 class 访问 td

Access td with class on row open

javascript

footable