javascript - jQuery 在 onchange 期间重置单个表

Question

我有一个表格如下。如何在更改期间使用 jQuery 将表重置为其原始状态(包含所有 th、tds)。不要重新加载整个页面，因为我还有另一个表。我尝试使用 dataTables，但它不必要地添加了搜索过滤器和分页

<table class="table table-bordered table-hover table-sm" id="t01">
  <thead style="text-align:center">
     <tr>
        <th class="col-md-6" style="text-align:center">Dxx</th>
        <th class="col-md-2" style="text-align:center">Rxx/Unit</th>
        <th class="col-md-2" style="text-align:center">Txxx</th>
        <th class="col-md-2" style="text-align:center">Pxxx</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <th>Full</th>
        <td id="fp" style="text-align:right">0</td>
        <td id="fr" style="text-align:center">0</td>
        <td>
          <div style="float:left">$</div>
          <div style="float:right" id="fpT">0.00</div>
        </td>
     </tr>
     <tr>
        <th >Fractional</th>
        <td id="fr" style="text-align:right">0</td>
        <td id="frN" style="text-align:center">0</td>
        <td>
          <div style="float:left">$</div>
          <div id="frT" style="float:right">0.00</div>
        </td>
     </tr>
     <tr>
        <th >Premium</th>
        <td id="pRate" style="text-align:right">0</td>
        <td id="pNos"  style="text-align:center">0%</td>
        <td>
          <div style="float:left">$</div>
          <div id="pTotal" style="float:right">0.00</div>
        </td>
     </tr>
     <tr class="active">
        <th>Premium Discount</th>
        <td style="text-align:right" id="premium-discount-rate">0</td>
        <td  style="text-align:center">
        <select id="premium-disc-list">
           <option value=""></option>
        </select>
        </td>
        <td>
          <div style="float:left">$</div>
          <div style="float:right" id="premium-discount-total">0.00</div>
        </td>
        </tr>

  </tbody>
</table>

jQuery

var table = $('#t01').dataTable();
//table.clear().draw();

//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();

Answer 1

我心里有两个选择:

1) 您可以使用一些“可重置”类标记所有可以重置的元素，并添加 data-original-val 属性，一旦您决定重置它，请执行以下操作:

$('.resetable','#t01').each(function(){
     var originalVal = $(this).data('original-val');
     $(this).html(originalVal);
})

2) 在 type="text/html" 脚本中渲染表格的另一个副本，如下所示:

<script type="text/html" id="t01-original">
 <table class="table table-bordered table-hover table-sm" id="t01">
  <thead style="text-align:center">
     <tr>
        <th class="col-md-6" style="text-align:center">Dxx</th>
        <th class="col-md-2" style="text-align:center">Rxx/Unit</th>
        <th class="col-md-2" style="text-align:center">Txxx</th>
        <th class="col-md-2" style="text-align:center">Pxxx</th>
     </tr>
  </thead>
  ...
 </table>
</script>

这样脚本标签的所有内容都不会被解析，并且不会出现重复的 id 问题。重置时，只需将表的内容替换为脚本中的内容即可:

//t01-container is the id of div that wraps the table:

$( '#t01-container').html($('#t01-original').html());