直接上代码
html代码
点击查看代码
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Url</th>
</tr>
<tr>
<td>Google</td>
<td>www.google.com</td>
</tr>
<tr>
<td>Runoob</td>
<td>www.runoob.com</td>
</tr>
<tr>
<td>Taobao</td>
<td>www.taobao.com</td>
</tr>
<tr>
<td>Baidu</td>
<td>www.baidu.com</td>
</tr>
</table>
js代码(可加script嵌入html)
点击查看代码
function myFunction() {
// 声明变量
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable"); //要找的所有元素的共同父结点
tr = table.getElementsByTagName("tr"); //所有元素的共同父结点下的每一个元素的同类父结点
// 循环遍历所有列表项,并隐藏那些与搜索查询不匹配的项
for (i = 0; i < tr.length; i++) { //遍历每一个元素的同类父节点(如果不想遍历最后一个的话,可以选择tr.length-1不遍历最后一个。)
td = tr[i].getElementsByTagName("td")[0]; //同类父节点下的要找的元素的具体位置
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none"; //不是的话就隐藏
}
}
}
}
注意:选择的父节点要对,位置要对,甚至script的位置也要对。
这个菜鸟工具还是不错的 https://c.runoob.com/examples/
原文地址:http://www.cnblogs.com/chaishengblog/p/16796735.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性