jQuery 在 onchange 期间重置单个表

jQuery reset a single table during onchange

本文关键字：单个表 onchange jQuery      更新时间：2023-09-26

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

<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();

我脑海中有两个选择：

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());
相关文章：