Javascript 如何使用jQuery切换表内容

我有一个按钮，当我点击它时，表

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>

#{label['regresse.totals']}
#{label['regresse.description']}
#{label['regresse.totals.debt']}
#{label['regresse.totals.paid']}
#{label['regresse.totals.debt']}{label['regresse.totals.overpay']}
#{label['regresse.totals.main total']}
科门塔拉斯
3478欧元
478欧元
3000欧元
#{label['regresse.totals.extra totals']}
科门塔拉斯
3478欧元
4000欧元
-522欧元
科门塔拉斯
120欧元
80欧元
科门塔拉斯
120欧元
80欧元
科门塔拉斯
120欧元
80欧元
#{label['regresse.total sum']}
6956欧元
4478欧元
2478欧元

像这样做

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

做这样的事

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

一旦使用

.empty（）

，它将删除内容（通过清空内容）。无法还原内容，因为它已被删除

您可以通过添加一个内部元素和

show

/

hide

来解决这个问题，例如：

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

或者，您可以在删除之前存储现有值，例如：

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

注意，您需要使用

。每个
，因为选择器中每个元素的值都需要存储自己的值。
一旦使用
.empty（）
，它将删除内容（通过清空内容）。无法还原内容，因为它已被删除

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

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

或者，您可以在删除之前存储现有值，例如：

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

请注意，您需要使用
。每个
，因为选择器中每个元素的值都需要存储自己的值。
我看到其他人现在回答了可能更好的解决方案，但这里有一把提琴，以防有帮助：

$（“表”）。单击（函数（）{
$（this）.children（）.each（函数（）{
如果（$（this.html（）=''）{
$（this.html（$（this.data（'text'））；
}否则{
var tdText=（$（this.html（））；
$（this）.data（'text'，tdText）；
$（this.html（“”）；
}
});
});
我看到其他人现在已经给出了可能更好的解决方案，但我做了一把提琴，以防有帮助：

$（“表”）。单击（函数（）{
$（this）.children（）.each（函数（）{
如果（$（this.html（）=''）{
$（this.html（$（this.data（'text'））；
}否则{
var tdText=（$（this.html（））；
$（this）.data（'text'，tdText）；
$（this.html（“”）；
}
});
});
请提供一些HTML。上述代码是否与
.empty（）
配合使用？.empty（）会删除这些值，但是我无法在再次单击后显示它们为什么不将内容放在span内并显示/隐藏这些span？@ManuelReis我正要更新您的答案，因为使用渲染时存储是解决此问题的一个有用选项请提供一些HTML。上面的代码是否适用于
.empty（）
？.empty（）会删除这些值，但我无法在再次单击后显示它们为什么不将内容放在一个范围内并显示/隐藏这些范围？@ManuelReis我正要对您的答案进行投票，因为在渲染时使用存储是一个有用的选项problem@freedomn-m您需要
.html（“”）
来清空html@freedomn-m您需要
.html（“”）
来清空html