Javascript 如何在博客上搜索和隐藏帖子

我的博客上有一张桌子

我给它一张输入表格。读者可以快速搜索数据

我从学校得到代码。

这段代码运行良好。但我需要一些改进

问题是：

如何在用户单击输入/按钮窗体上的“输入键”时显示表格

当输入表单为空时，表会自动隐藏

---

请参阅下面的代码。我希望这能解决你的问题

* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#我的桌子{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#MYTH表，
#myTable td{
文本对齐：左对齐；
填充：12px；
}
#myTable tr{
边框底部：1px实心#ddd；
}
#myTable tr.header，
#myTable tr：悬停{
背景色：#f1f1；
}
我的顾客
名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国
#我的桌子{
显示：无；
}
#myTable.hide{
显示：表格；
}
函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
var inputvalues=$（“#myInput”）.val（）；
如果（inputvalues.length>0）{
$（“#myTable”）.addClass（“隐藏”）；
}
if（inputvalues==“”| | inputvalues==null）
$（“#myTable”）.removeClass（“隐藏”）；
}

只有在输入时按“回车键”时，才会触发搜索。
删除搜索文本时，表将自动隐藏

* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#我的桌子{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#我的表th，#我的表td{
文本对齐：左对齐；
填充：12px；
}
#myTable tr{
边框底部：1px实心#ddd；
}
#myTable tr.header，#myTable tr:悬停{
背景色：#f1f1；
}
我的顾客
名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国
var input=document.getElementById（“myInput”）；
input.addEventListener（“键控”，函数（事件）{
输入=document.getElementById（“myInput”）；
if（input.value.length-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}       
}
document.getElementById（“myTable”）.style.display='block'；
}

非常感谢。兄弟，你给了我一个解决方案。如果你对我的sol很无礼。请就我的回答投票给我。好的。但我不知道怎么做。你能指导我吗？你很好。这就是我发现的。你解决了我的问题。我哥哥非常感谢你。给你更多的权力！这个社区有义务帮助人们。感谢你的投票。