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()后，它会删除内容（通过清空）。内容无法恢复，因为它已被删除。

你可以通过添加内部元素和show / hide来解决这个问题，例如：

<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，因为选择器中的每个元素值都需要存储自己的值。

Answer 2

做这样的事情

// Selecting all elements
$el = $('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)');
if (row.child.isShown()) {
    $el.each(function () {

        // Setting HTML from data-val
        $(this).html($(this).data("val"));

    });
} else {

    $el.each(function () {

        // Setting data-val equals to html which can be used later and emptying the html 
        $(this).data("val", $(this).html());
        $(this).html("");
    });
}

Answer 3

我看到其他人现在已经回答了最有可能更好的解决方案，但是如果它有所帮助，这里有一个小提琴：https://jsfiddle.net/w81qtgp2/

$('table').click(function () {

    $(this).children().each(function () {
        if ($(this).html() === '<td> </td>') {
            $(this).html($(this).data('text'));
        } else {
            var tdText = ($(this).html());
            $(this).data('text', tdText);
            $(this).html('<td> </td>');
        }
    });
});

如何使用jQuery

3 个答案: