隐藏时如何清除表数据 [英] How to clear table data if it's hide

问题描述

我有一些表格会根据单选按钮显示.如果单选按钮的值为"YES"，则显示表格，如果"No"，则隐藏表格.我找到了解决方法.现在我想知道，如果有人填写了表格数据并单击否"按钮(这将隐藏表格)，是否有任何方法可以清除表格中的文件.因此，当再次单击是"按钮时，访问者将看到一个新表.

I have some tables which will show depending on radio button. If radio button value is 'YES' then show the table if 'No' then hide. I got the solution how to do that. Now I want to know If someone fill-up the table data and clicks the 'No' button (which will hide the table), is there any way to clear the filed inside the table. So, when again click on the YES button visitor will see a fresh table.

这是我的代码:

 $(document).ready(function() {
      $('.form-check-inline input[type="radio"]').on('change', function() {
        $(this).closest('.form-group').next('table').toggle(this.checked && this.value === 'Yes');
      });
    });

.show-dc-table {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Do you have allergies?</label>
      <div class="col-sm-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="allergy" value="Yes">
          <label class="form-check-label">Yes</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="allergy" value="No">
          <label class="form-check-label">No</label>
        </div>
      </div>
    </div>
    <table class="table table-striped show-dc-table">
      <thead>
        <tr>
          <th scope="col">Alergic Reactions to</th>
          <th scope="col">Yes</th>
          <th scope="col">No</th>
          <th scope="col">Notes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Aspirin, Ibuprofen, Codeine</td>
          <td><input type="radio" name="a1" /></td>
          <td><input type="radio" name="a2" /></td>
          <td><input type="text" /></td>
        </tr>
      </tbody>
    </table>
    
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Do you have a cough?</label>
      <div class="col-sm-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="cough" value="Yes">
          <label class="form-check-label">Yes</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="cough" value="No">
          <label class="form-check-label">No</label>
        </div>
      </div>
    </div>
    <table class="table table-striped show-dc-table">
      <thead>
        <tr>
          <th scope="col">Alergic Reactions to</th>
          <th scope="col">Yes</th>
          <th scope="col">No</th>
          <th scope="col">Notes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum</td>
          <td><input type="radio" name="a1" /></td>
          <td><input type="radio" name="a2" /></td>
          <td><input type="text" /></td>
        </tr>
      </tbody>
    </table>

推荐答案

如果要清除表以删除所有行，则可以使用table.html('');，其中为table分配了$(this).closest('.form-group').next('table').如果您只是想清除输入字段，那么最简单的方法是将您的字段括在<form>中并进行表单重置.

If you mean by clearing out the table to remove all rows, then you can use table.html(''); where table is assigned $(this).closest('.form-group').next('table'). If you mean to just clear out the input fields, the easiest way to do that is to enclose your fields in a <form> and to do a form reset.

请参阅(并运行)以下代码段:

See (and run) the code snippet below:

$(document).ready(function() {
  $('.form-check-inline input[type="radio"]').on('change', function() {
    let table = $(this).closest('.form-group').next('table');
    if (this.value === 'No') {
      $('#f').trigger('reset');
      table.hide();
    }
    else {
      table.show();
    }
  });
});

.show-dc-table {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="f">
<div class="form-group row">
  <label class="col-sm-2 col-form-label">Do you have allergies?</label>
  <div class="col-sm-10">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="allergy" value="Yes">
      <label class="form-check-label">Yes</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="allergy" value="No">
      <label class="form-check-label">No</label>
    </div>
  </div>
</div>
<table class="table table-striped show-dc-table">
  <thead>
    <tr>
      <th scope="col">Alergic Reactions to</th>
      <th scope="col">Yes</th>
      <th scope="col">No</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aspirin, Ibuprofen, Codeine</td>
      <td><input type="radio" name="a1" /></td>
      <td><input type="radio" name="a2" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>
</form>

这篇关于隐藏时如何清除表数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！