Question

我创建了一个带有搜索栏的表格，可以根据我在搜索栏中输入的内容来过滤数据。我遇到的问题是我创建的重置按钮。我想要的是清除搜索栏并将表格返回到显示所有数据的原始状态（不是过滤后的数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/RichStyle.css">
    <!-- Custom Made CSS -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/toggle.js"></script>
    <script src="js/jquery%201.4.4.min.js"></script>
    <!-- JS -->

    <!-- Slide Toggle -->
    <script type="text/javascript">

        $(document).ready(
                function() {
                    $('td p').slideUp();
                    $('td h2').click(
                            function(){
                                $(this).closest('tr').find('p').slideToggle();
                            }
                    );
                }
        );

    </script>

    <!-- Search Bar -->
    <script language="javascript" type="text/javascript">

        $(document).ready(function() {
            $('#search').keyup(function() {
                searchTable($(this).val());
            });
        });
        function searchTable(inputVal) {
            var table = $('#searchTable');
            table.find('tr').each(function(index, row) {
                var allCells = $(row).find('td');
                if (allCells.length > 0) {
                    var found = false;
                    allCells.each(function(index, td) {
                        var regExp = new RegExp(inputVal, 'i');
                        if (regExp.test($(td).text())) {
                            found = true;
                            return false;
                        }
                    });
                    if (found == true)
                        $(row).show();
                    else
                        $(row).hide();
                }
            });
        }
    </script>

    <title>Report Page</title>

</head>

<body>

<div>
    <p>
    <form>
    <label for="search"></label>
    <input type="text" id="search" placeholder="Enter Search Term" />
    <input type="reset" value="Reset" />
    </form>
    </p>

<table id="searchTable">
    <thead>
    <tr>
        <th>User ID</th>
        <th>Website</th>
        <th>Hours Spent</th>
        <th>Data Usage</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><h2>Luke</h2></td>
        <td><h3 id="Luke">

            <script>
                var website = ["Facebook", "Youtube"];
                document.getElementById("Luke").innerHTML = website.length;
            </script></h3><p>Facebook</p><p>Youtube</p></td>
        <td><h3>2.5h</h3><p>2h</p><p>0.5h</p></td>
        <td><h3>1.3gb</h3><p>3mb</p><p>1gb</p></td>
    </tr>
    <tr>
        <td><h2>John</h2></td>
        <td><h3 id="John">

            <script>
                var website = ["Youtube"];
                document.getElementById("John").innerHTML = website.length;
            </script></h3><p>Youtube</p></td>
        <td><h3>3h</h3><p>3h</p></td>
        <td><h3>1gb</h3><p>1gb</p></td>
    </tr>
    <tr>
        <td><h2>Peter</h2></td>
        <td><h3 id="Peter">

            <script>
                var website = ["Facebook", "Youtube"];
                document.getElementById("Peter").innerHTML = website.length;
            </script></h3><p>Facebook</p><p>Youtube</p></td>
        <td><h3>1.75h</h3><p>1.5h</p><p>0.25h</p></td>
        <td><h3>1.3gb</h3><p>3mb</p><p>1gb</p></td>
    </tr>
    </tbody>
</table>
    </div>

<button onclick="window.print()">Print Report</button>
<!-- Javascript Coding - No Colours Displayed On Print Preview-->
<button>Save Report</button>
<!-- Save Button Does Not Work, Fix Needed-->
</body>
</html>

Answer 1

@esteban rincon是对的，<input type="reset" value="Reset" />可以重置您的表单输入，但不会清除任何其他HTML内容。

你需要自己清楚。

例如，您可以在重置按钮中添加id属性，并添加onClick事件以清除searchTable <{1}}，如$('#searchTable').empty();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset=utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/RichStyle.css">
  <!-- Custom Made CSS -->
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/toggle.js"></script>
  <script src="js/jquery%201.4.4.min.js"></script>
  <!-- JS -->

  <!-- Slide Toggle -->
  <script type="text/javascript">
    $(document).ready(
      function() {
        $('td p').slideUp();
        $('td h2').click(
          function() {
            $(this).closest('tr').find('p').slideToggle();
          }
        );
      }
    );
  </script>

  <!-- Search Bar -->
  <script language="javascript" type="text/javascript">
    $(document).ready(function() {
      $('#search').keyup(function() {
        searchTable($(this).val());
      });
      //Add this for reset click reset your search record
      $('#resetAll').click(function() {
        $('#searchTable tbody').empty();
      });
    });

    function searchTable(inputVal) {
      var table = $('#searchTable');
      table.find('tr').each(function(index, row) {
        var allCells = $(row).find('td');
        if (allCells.length > 0) {
          var found = false;
          allCells.each(function(index, td) {
            var regExp = new RegExp(inputVal, 'i');
            if (regExp.test($(td).text())) {
              found = true;
              return false;
            }
          });
          if (found == true)
            $(row).show();
          else
            $(row).hide();
        }
      });
    }
  </script>

  <title>Report Page</title>

</head>

<body>

  <div>
    <p>
      <form>
        <label for="search"></label>
        <input type="text" id="search" placeholder="Enter Search Term" />
        <!-- add id resetAll -->
        <input id="resetAll" type="reset" value="Reset" />
      </form>
    </p>

    <table id="searchTable">
      <thead>
        <tr>
          <th>User ID</th>
          <th>Website</th>
          <th>Hours Spent</th>
          <th>Data Usage</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <h2>Luke</h2>
          </td>
          <td>
            <h3 id="Luke">

            <script>
                var website = ["Facebook", "Youtube"];
                document.getElementById("Luke").innerHTML = website.length;
            </script></h3>
            <p>Facebook</p>
            <p>Youtube</p>
          </td>
          <td>
            <h3>2.5h</h3>
            <p>2h</p>
            <p>0.5h</p>
          </td>
          <td>
            <h3>1.3gb</h3>
            <p>3mb</p>
            <p>1gb</p>
          </td>
        </tr>
        <tr>
          <td>
            <h2>John</h2>
          </td>
          <td>
            <h3 id="John">

            <script>
                var website = ["Youtube"];
                document.getElementById("John").innerHTML = website.length;
            </script></h3>
            <p>Youtube</p>
          </td>
          <td>
            <h3>3h</h3>
            <p>3h</p>
          </td>
          <td>
            <h3>1gb</h3>
            <p>1gb</p>
          </td>
        </tr>
        <tr>
          <td>
            <h2>Peter</h2>
          </td>
          <td>
            <h3 id="Peter">

            <script>
                var website = ["Facebook", "Youtube"];
                document.getElementById("Peter").innerHTML = website.length;
            </script></h3>
            <p>Facebook</p>
            <p>Youtube</p>
          </td>
          <td>
            <h3>1.75h</h3>
            <p>1.5h</p>
            <p>0.25h</p>
          </td>
          <td>
            <h3>1.3gb</h3>
            <p>3mb</p>
            <p>1gb</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <button onclick="window.print()">Print Report</button>
  <!-- Javascript Coding - No Colours Displayed On Print Preview-->
  <button>Save Report</button>
  <!-- Save Button Does Not Work, Fix Needed-->
</body>

</html>

＆＃13;

Answer 2

如果您想使用<input type="reset" />标记，则重置的元素必须为editable，即您可以在其中键入任何内容，因此

输入类型=“文字”
输入类型=“密码”
输入类型=“电子邮件”
等。。

以上是可编辑的。因此，如果您想要的是，您在table中没有更多数据，您可以使用JQuery，这是使用input reset的示例

$(function(){ // this is === to  document.ready
  
  $("#the-table .ins").val("some value here ");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- the tags that you can enter text into can be reset if they resied within the same form that contains the  reset button -->
<form action="some url" method="post">
        First name: <input type="text" name="firstname" /> <br />
        Surname: <input type="text" name="surname" /><br />
        <input type="reset" value="Clear form" />
        <input type="submit" value="Submit now" />
</form>
<hr />
With a  table: 

<!-- so when the page loads, we use JQuery to insert so value to your table -->
<form action="some url" method="post">
  <table id="the-table">
    <tr><td><input class="ins" type="text"  /></td>
    <td><input class="ins" type="text"  /></td>
    </tr>
  </table>
  <input type="reset" value="Clear form" />
</form>

以下是使用jquery清除table 数据

$(function(){

  $('#reset-btn').click(function(){
  
      $('table tr').remove();
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>click on the table to remove data </h2>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
<button id="reset-btn">reset data</button>

重置按钮问题

2 个答案: