我在这篇文章的jsfiddle中有一个工作正常的javascript,并且希望在我的浏览器中本地运行。
我不太确定我还需要添加什么其他内容才能使其正常运行。我读了很多帖子,但仍然不知道如何解决它。
以下是我的操作,但是运行代码段时出现错误,有人可以帮忙吗?谢谢。
$(document).ready(function myFunction() {
// Declare variables
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
});
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>
</head>
<body>
<p><input id="myInput" type="text" placeholder="Search for names.." /></p>
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
</body>
</html>
首先,您需要添加jquery库,下一步是将onkeyup事件添加到您的输入中以启动功能
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
例子:
function myFunction() {
// Declare variables
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input id="myInput" type="text" onkeyup="myFunction()" placeholder="Search for names.." /></p>
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句