将淡入/淡出添加到表结果中
我有以下代码：
<script type="text/javascript">
function filter(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle='';
else {
displayStyle='none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
javascript 的目标是这个 html 表：
<body><form>
<b>Search:</b>
<input name="filt" onkeyup="filter(this, 'sf', '1')" type="text">
</form>
<br>
<table id="sf" width="100%" border="0" cellspacing="1" cellpadding="2">
<tr bgcolor="">
<td align="MIDDLE">
<font color=""><b>First Name</b></font>
</td>
<td align="MIDDLE">
<font color=""><b>Last Name</b></font>
</td>
<td align="MIDDLE">
<font color=""><b>Location</b></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
John
</td>
<td>
Smith
</td>
<td>
Sun
</td>
</tr>
<tr bgcolor="#EAECEF">
<td>
James
</td>
<td>
Bond
</td>
<td>
Moon
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
Rob
</td>
<td>
Halford
</td>
<td>
Mars
</td>
</tr>
</table>
我希望当用户完成搜索查询并点击“输入”时表格淡出，然后结果淡入。
有人可以帮我吗？
多谢！
I have the following code:
<script type="text/javascript">
function filter(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle='';
else {
displayStyle='none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
The javascript is targeting this html table:
<body><form>
<b>Search:</b>
<input name="filt" onkeyup="filter(this, 'sf', '1')" type="text">
</form>
<br>
<table id="sf" width="100%" border="0" cellspacing="1" cellpadding="2">
<tr bgcolor="">
<td align="MIDDLE">
<font color=""><b>First Name</b></font>
</td>
<td align="MIDDLE">
<font color=""><b>Last Name</b></font>
</td>
<td align="MIDDLE">
<font color=""><b>Location</b></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
John
</td>
<td>
Smith
</td>
<td>
Sun
</td>
</tr>
<tr bgcolor="#EAECEF">
<td>
James
</td>
<td>
Bond
</td>
<td>
Moon
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
Rob
</td>
<td>
Halford
</td>
<td>
Mars
</td>
</tr>
</table>
I would like the table to fadeOut when user completes their search query and hits 'enter' and then the results to fadeIn.
Could anyone help me please?
Thanks a lot!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
替换
为,
Replace,
with,
它可以使用 jQuery 以一种简单的方式完成。如果你还没有使用它，你应该使用它。
it can be done in a nice and simple manner using jQuery. if you don't use it yet, you should do.