时间戳

首页 > 解决方案 > 访问 td 并打开行上的类

javascript - 访问 td 并打开行上的类

问题描述

我有一个可脚 的. 当我点击加号展开一行时

在此处输入图像描述

我想用 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>

知道点击后如何使用类访问 tdsomeText吗？

这是一个jsFiddle

注意：这不是Footable 和捕获扩展行事件的副本。链接的问题是关于一般如何访问一行的。这个问题是如果我使用 API 中的方法选择它，则内容未正确加载。这个问题帮助我到达了这里，但并没有解决这里提出的问题。

标签： javascriptfootable

解决方案

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的源代码发现了这个事件

推荐阅读