Как переключить содержимое таблицы с помощью jQuery

Question

У меня есть кнопка, когда я нажимаю на нее, таблицы td 's должны быть пустыми, при втором нажатии они должны быть заполнены снова. Проблема в том, что когда я использую .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>'); 
     } 
    }); 
});