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）您可以使用某些可重置的＆＃39;标记所有可以重置的元素。 class并添加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());

jQuery在onchange期间重置了一个表

1 个答案: