Javascript 未使用onkeyup为表搜索定义函数
使用与W3K类似的功能,我得到一个错误,输入元素上没有定义用于Javascript 未使用onkeyup为表搜索定义函数,javascript,Javascript,使用与W3K类似的功能,我得到一个错误,输入元素上没有定义用于onkeyup的函数。函数的名称是相同的,因此这不应该是一个问题 HTML <div class="row"> <div class="container form-container"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 search-form"> <input type="text" id="search" onk
onkeyup
的函数。函数的名称是相同的,因此这不应该是一个问题
HTML
<div class="row">
<div class="container form-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 search-form">
<input type="text" id="search" onkeyup="tableSearch()" placeholder="Search for names.." title="Search by Name, Practice Area or Location">
</div>
</div>
<div class="results">
<div class="col-lg-12">
<div id="no-more-tables">
<table id="results" class="order-table col-md-12 cf">
<thead class="cf">
<tr>
<th class="numeric">field 1</th>
<th class="numeric">field 2</th>
<th class="numeric">field 3</th>
<th class="numeric">field 4</th>
<th class="numeric">field 5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="" class="name"><a href="user-1">User 1</a><a href="tel:(407) 420-1414"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user1@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td>
<td data-title="location"></td>
<td data-title="practice area" class=""></td>
<td data-title="email" class="numeric desktop-only"><a href="mailto:user1@site.com">user1@site.com</a></td>
<td data-title="phone" class="numeric desktop-only"><a href="tel:(111) 111-1111">(111) 111-1111</a></td>
</tr>
<tr>
<td data-title="" class="name"><a href="user-2">User 2</a><a href="tel:1111111111"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user2@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td>
<td data-title="location"></td>
<td data-title="practice area" class=""></td>
<td data-title="email" class="numeric desktop-only"><a href="mailto:user2@site.com">user2@site.com</a></td>
<td data-title="phone" class="numeric desktop-only"><a href="tel:1111111111">1111111111</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
字段1
字段2
字段3
字段4
字段5
JavaScript
function tableSearch() {
var input, filter, table, tr, td, i;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("results");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
tds = tr[i].getElementsByTagName("td");
var found = false;
//---second loop that goes over all tds in a tr ---can be modified as required to go over only certain tds
for (j = 0; j < tds.length; j++) {
td = tds[j];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
}
if (found)
tr[i].style.display = "";
else
tr[i].style.display = "none";
}
}
函数表搜索(){
var输入、过滤器、表格、tr、td、i;
输入=document.getElementById(“搜索”);
filter=input.value.toUpperCase();
table=document.getElementById(“结果”);
tr=table.getElementsByTagName(“tr”);
对于(i=0;i-1){
发现=真;
打破
}
}
}
如果(找到)
tr[i].style.display=“”;
其他的
tr[i].style.display=“无”;
}
}
JSFIDDLE:您的方法
表搜索
在您的fiddle的Javascript选项中处于加载类型,因此它不在全局范围内
检查更新的Javascript选项。我选择了“Wrap in head”将其放入全局范围,以便可以从事件处理程序访问它。也许您可以使用jquery库
$( "#search" ).keypress(function() {
tableSearch();
});
我懂了。另一个问题是,表头在搜索时消失,尽管它们应该保持可见,就像在w3schools版本中一样。