Question

<table data-role="table" id="statement" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Headings" data-column-popup-theme="a">
 <thead>
   <tr class="ui-bar-d">
    <th data-priority="1">Category</th>
    <th data-priority="5">Date</th>
    <th data-priority="1">Debit</th>
    <th data-priority="1">Credit</th>
    <th data-priority="1">Balance</th>
   </tr>
 </thead>
<tbody>
</tbody>
</table>

以下是我用AJAX填充表的方法。

$.each(data, function(index, item) {
      $("#statement").append("<tr>"+
                             "<td>" + item.category + "</td>"+
                             "<td>" + item.transaction_date + "</td>"+
                             "<td>" + item.debit + "</td>"+
                             "<td>" + item.credit + "</td>"+
                             "<td>" + item.Balance + "</td>"+
                             "</tr>");
        });

代码工作正常，但我遇到的问题是，当我选择隐藏的列时，只有the中的th消失，但tbody中的t不会。换句话说，效果仅发生在头部而不是身体部分。 tbody部分保持不变，而列的thead部分消失。

我还注意到，当我在不使用AJAX的情况下手动填充表格时，当我选择要隐藏的列时，效果会发生在thead部分和tbody部分。这意味着当我不使用AJAX手动填充表时，它工作正常。我认为问题可能出在DOM上。

任何人都可以帮我解决这个问题。

Answer 1

首先，将新行追加到表体，而不是表其次，在追加行后，将表格小部件告诉 rebuild

{{1}}

<强> DEMO

JQM响应表问题

1 个答案: