javascript - 当一页上有多个表时，Jquery Mobile Column Toggle append button

Question

我对 jquery mobile 1.4.2 webapp 有疑问。我有一个包含 2 个表的页面，它们都使用列切换按钮。我想将这些按钮中的每一个移动到它们自己的占位符以允许水平滚动。

当有一个表时，我有这个工作，但我不知道如何为列切换按钮指定表 ID，以移动正确表的按钮。

<div id="colUnit"></div>

$(document).on("pageinit", "#contractDetails", function () {
   $(".ui-table-columntoggle-btn").appendTo("#colUnit");
}); 

有没有办法在 jquery 中指定表 ID，以便将正确的按钮移动到<div id="colUnit"></div>

它目前将两个按钮（每个表中的一个）放入<div id="colUnit"></div>

Answer 1

column-toggle按钮是表的兄弟并放置在它们之前。用于.prev()移动到另一个地方。

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .appendTo("#colUnit");

---

更新

您还可以将它们附加到控制组中并更改其文本。

<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>

将按钮移动到controlgroup。

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .each(function () {
    var text = $.mobile.path.parseUrl($(this)
        .prop("href"))
        .hash.substring(1);
    $(this)
        .text(text.split("-")[0])
        .appendTo($("#colUnit")
        .controlgroup("container"));
});

$("#colUnit").controlgroup("refresh");

演示