Question

我对jQuery很新，如果多次问这个问题，请指出正确的方向。我试图将一个回流表放在一个可折叠的div中。

   $.each(info, function (i, area) {
    // Clone block
    var item_area_block = area_block.cloneNode(false);
    var item_area_title = area_title.cloneNode(false);
    var item_area_display =  area_display.cloneNode(false);
    var item_area_table = area_table.cloneNode(false);
    var item_area_table_body = area_table_body.cloneNode(false);

    // Create title
    item_area_title.innerHTML = area.area_name;

    // Create table content
    item_area_table.setAttribute("id", "category_table_"+i);
    $.each(area.sport_category, function (cat_number, category) {
        var table_tr = area_table_tr.cloneNode(false);
        var table_th = document.createElement('th');

        table_th.innerHTML = category.sport_name;
        table_tr.appendChild(table_th);
        $.each(category.events, function (i, date) {
             var table_date_td = area_table_td.cloneNode(false);
             table_date_td.innerHTML = date.url;
             table_tr.appendChild(table_date_td);
        });


        item_area_table_body.appendChild(table_tr);
    });

    // Thread
    var item_area_table_thread = document.createElement('thead');
    var thread_table_tr = area_table_tr.cloneNode(false);
    var thread_table_th = document.createElement('th');
    var thread_table_th2 = document.createElement('th');
    thread_table_th.innerHTML = "test";
    thread_table_th2.innerHTML = "test2";
    thread_table_tr.appendChild(thread_table_th);
    thread_table_tr.appendChild(thread_table_th2);
    item_area_table_thread.appendChild(thread_table_tr);
    item_area_table.appendChild(item_area_table_thread);

    item_area_table.appendChild(item_area_table_body);
    <!-- $("#category_table_"+i).table("refresh"); -->
    <!-- item_area_display.appendChild(item_area_table); -->

    // Add content block to container
    item_area_block.appendChild(item_area_title); // Title
    item_area_block.appendChild(item_area_table); // Content
    container.appendChild(item_area_block);

});

//Reflesh
$("#area_table").promise().done(function () {
    $(this).find('div[data-role=collapsible]').collapsible({
        refresh: true
    });
});
$('info-page').trigger('pagecreate');
});

工作JSFiddle example，这是我的failed example。

如果我将表格的html代码复制到另一个页面，它似乎工作正常。我也尝试了这个question

的解决方案

Answer 1

我认为你只需要初始化jQM表小部件以及刷新可折叠：

$("#area_table").promise().done(function () {
    $(this).find('div[data-role=collapsible]').collapsible({
        refresh: true
    });
    $(this).find('table').table();
});

更新了 FIDDLE

可折叠集内的jQuery reflow表没有响应

1 个答案: