我创建了一个带有搜索栏的表格，可以根据我在搜索栏中输入的内容来过滤数据。我遇到的问题是我创建的重置按钮。我想要的是清除搜索栏并将表格返回到显示所有数据的原始状态（不是过滤后的数据）
<!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>
答案 0 :(得分：2)
@esteban rincon是对的，<input type="reset" value="Reset" />可以重置您的表单输入，但不会清除任何其他HTML内容。
你需要自己清楚。
例如，您可以在重置按钮中添加id属性，并添加onClick事件以清除searchTable <{1}}，如$('#searchTable').empty();
<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>
答案 1 :(得分：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>