我有一个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中的方法选择它,则内容无法正确加载。这个问题帮助我到达了这里,但是并没有解决这里提出的问题。
答案 0 :(得分: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中的源代码发现了此事件
答案 1 :(得分:0)
使用“异步功能”,尝试以下代码:
$(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