How to toggle table contents with jQuery

Question

I have a button, when I click it the tables td's must be empty, on second click they must be filled again. Problem is, when I use .empty() it leaves the table empty and I can't restore the values.

.hide() and .show() only works with html elements, they cant hide/show content.

.html() and .text() selects the content but I can't find the way to toggle them.

jQuery code:

$('#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

Once you use .empty(), it deletes the content (by emptying it). The contents cannot be restored because it's been deleted.

You can get around this by adding an inner element and show / hide that, eg:

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

then

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

or, you can store the existing value before removing it, eg:

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

then, to restore:

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

Note, you need to use .each as each element's value in the selector needs to store its own value.

Answer 2

I see others have now answered with what are most probably better solutions, but here is a fiddle I made in case it helps: 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>');
        }
    });
});

Answer 3

Do something like this

// 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("");
    });
}