的 DEMO

Question

我试图制作一个用户可以选择显示/隐藏哪些列的表格。 JQuery（我已经在我的网站上使用过）通过他们的JQuery Mobile＆＃34;响应表＆＃34;提供了这个功能。小部件，特别是＆＃34;列切换＆＃34;变体。

如果我把表放在页面中，我可以完美地工作，所以我知道文件正在导入，我的代码是正确的。问题是这个表是Ajax调用的结果，所以它是在$ .post（）函数内部构建的，并且一旦构建就放在页面上。这部分也适用于显示表格。但是，当表格显示时，它没有响应。至少，它缺乏最重要的列......＆＃34;链接。在$ .post（）中，我像这样构造表，然后追加到它： resultsTable = $("<table id='resultsTable' data-role='table' data-mode='columntoggle' data-column-btn-text='Show/Hide Columns...' class='ui-responsive'></table>");

我认为问题在于Jquery Mobile可以挂钩创建表来修改它，或者由于某些其他原因不知道它存在。因此我尝试在$ .post结束前刷新它： $("#resultsTable").table("refresh");

这没有效果。我试过移动它，打电话给'刷新＆＃39;方法以不同的方式，并寻找其他人是否有这个问题。到目前为止没有结果。我知道解决方案必须简单，但我无法找到它。我可以找到很多关于动态生成表的信息，还有很多关于响应表的信息，但没有关于将它们一起使用我很感激任何建议。提前谢谢。

Answer 1

我建议在将.table()附加到HTML之前指定{。}}。

在$.post()成功功能中，它可能如下所示：

var resultsTable = $("<table>", {
    'id':'resultsTable',
    'data-role':'table',
    'data-mode':'columntoggle',
    'data-column-btn-text':'Show/Hide Columns...',
    'class':'ui-responsive'
});
resultsTable.table();
resultsTable.appendTo("#results");

通过这种方式，元素在被添加之前被设置为响应。

此外，refresh不是.table()的方法或事件：https://api.jquerymobile.com/table/

我想你可以试试.table('rebuild')。

Answer 2

将表附加到容器DOM元素后，在容器上调用 enhanceWithin() ：

$("#tableCont").empty().append(resultsTable).enhanceWithin();

的 DEMO

单击演示中的按钮以创建表格。

即使在刷新之后，JQuery Mobile响应表也不适用于动态构建的表

2 个答案:

的 DEMO