javascript - 如何使用 jQuery 切换表格内容

Question

我有一个按钮，当我单击它时，表td必须为空，第二次单击时，它们必须再次填充。 问题是，当我使用 .empty() 时，它会使表为空，并且我无法恢复这些值。

.hide() 和 .show() 仅适用于 html 元素，它们无法隐藏/显示内容。

.html() 和 .text() 选择内容，但我找不到切换它们的方法。

jQuery 代码:

$('#totalsTable tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = totalsTable.row(tr);
    if (row.child.isShown()) {
        $('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().show();
    } else {
       $('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().hide();
    }
});

HTML

<table id="totalsTable" class="table table-bordered small table-hover" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>#{label['regress.totals']}</th>
            <th>#{label['regress.description']}</th>
            <th>#{label['regress.totals.debt']}</th>
            <th>#{label['regress.totals.paid']}</th>
            <th>#{label['regress.totals.debt']}<i class="fa fa-plus text-success" />#{label['regress.totals.overpay']}<i class="fa fa-minus text-danger" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>#{label['regress.totals.main-total']}</td>
            <td>Kelių žodžių komentaras</td>
            <td>3478 Eur</td>
            <td>478 Eur</td>
            <td class="text-success">3000 Eur</td>
        </tr>
        <tr class="active">
            <td class="details-control"></td>
            <th>#{label['regress.totals.extra-totals']}</th>
            <td>Kelių žodžių komentaras</td>
            <td>3478 Eur</td>
            <td>4000 Eur</td>
            <td class="text-danger">-522 Eur</td>
        </tr>
        <tr class="extra" hidden="true">
            <td></td>
            <td><a href="#">Už žalų administravimą </a>
            </td>
            <td>Kelių žodžių komentaras</td>
            <td><a href="#" data-toggle="modal" data-target="#paymentInfo">200 Eur</a>
            </td>
            <td>120 Eur</td>
            <td class='text-success'>80 Eur</td>
        </tr>
        <tr class="extra" hidden="true">
            <td></td>
            <td><a href="#">Bylinėjimo išlaidos </a>
            </td>
            <td>Kelių žodžių komentaras</td>
            <td><a href="#" data-toggle="modal" data-target="#paymentInfo">200 Eur</a>
            </td>
            <td>120 Eur</td>
            <td class='text-success'>80 Eur</td>
        </tr>
        <tr class="extra" hidden="true">
            <td></td>
            <td><a href="#">Bylinėjimo išlaidos </a>
            </td>
            <td>Kelių žodžių komentaras</td>
            <td><a href="#" data-toggle="modal" data-target="#paymentInfo">200 Eur</a>
            </td>
            <td>120 Eur</td>
            <td class='text-success'>80 Eur</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th colspan="2" style="text-align:right">#{label['regress.total-sum']}</th>
            <th>6956 Eur</th>
            <th>4478 Eur</th>
            <th class="text-success">2478 Eur</th>
        </tr>
    </tfoot>
</table>

Answer 1

一旦您使用.empty()，它就会删除内容(通过清空它)。内容无法恢复，因为它已被删除。

您可以通过添加内部元素并显示/隐藏来解决此问题，例如:

<table>
  <tr>
    <td><div>content</div></td>

然后

$("table td:nth-child(0) > div,table td:nth-child(6) > div").hide();

或者，您可以存储现有值，然后再删除它，例如:

$("table td:nth-child(0)").each(function() {
  $(this).data($(this).html());
  $(this).html("");
});

然后，恢复:

$("table td:nth-child(0)").each(function() {
  $(this).html($(this).data("store"));
});

注意，您需要使用.each，因为选择器中的每个元素的值都需要存储自己的值。