JavaScript document 对表格内容搜索 模糊搜索 多个关键字搜索

最新推荐文章于 2024-07-02 11:41:42 发布
最新推荐文章于 2024-07-02 11:41:42 发布
阅读量8k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript document table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyzhang6/article/details/78211471
版权
<!DOCTYPE >
<html>
<!--
作者：hyzhang
时间：2017-10-11
描述：document 搜索 模糊搜索
-->
<head>
<meta charset="utf-8" />
<style>
/*tr:hover{
color: yellow;
}*/
</style>
</head>
<body>
<script>
window.οnlοad=function(){
var etable = document.getElementById("tbe");
var btn1 =document.getElementById("btn");
var text1 = document.getElementById("txt1");

btn1.οnclick=function(){
for (i=0;i<etable.tBodies[0].rows.length;i++) {

//toLowerCase 对大写字母转化为小写字母
var str1 = etable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//表格字符串
var str2 = text1.value.toLowerCase();//输入的字符串

var L = str2.split(" ");
etable.tBodies[0].rows[i].style.background="";
for (var j=0;j<L.length;j++) {
if (str1.search(L[j])!=-1) {
etable.tBodies[0].rows[i].style.background="red";
}
}

//search等于-1没找到
/*if (str1.search(str2)!=-1) {
etable.tBodies[0].rows[i].style.background="red";
}*/
}
}


}

</script>

姓名：<input id="txt1" type="text" />
<input type="button"  id="btn" value="搜索" />
<table id="tbe" width="300" border="1">
<thead>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>4</td>
<td>tom</td>
<td>33</td>
</tr>
</tbody>
</table>

</body>

</html>
hyzhang6
关注
专栏目录
js 搜索 匹配关键字
04-18
js 搜索 匹配关键字
【原创】多关键词搜索高亮标红关键词的JS方法
06-01
实现JS多关键词高亮方法，可以改造查询条件直接引用该JS方法使用，更加简单简洁实现查询高亮关键词。多关键词当前以空格隔开演示。
wps 表格如何实现vlookup高级模糊搜索
最新发布
石头的博客
07-02 3285
wps 表格如何实现vlookup高级模糊搜索
【JavaScript】用原生js来实现表格中多关键词搜索、排序功能
Owen的博客
01-11 802
多关键词搜索
表格、列表关键字搜索且高亮显示的纯JavaScript实现
m0_37899540的博客
09-23 1203
该js组件用于前端表格实现关键字搜索时的高亮匹配，效果不错，既可以用于table，也可以用于列表ul
js遍历获取表格内数据方法
qq_43679771的博客
02-22 3067
js遍历获取表格内数据方法
jQuery模糊搜索表格数据代码.zip
09-22
此代码示例适用于简单的表格，如果你的应用场景更复杂，例如有分页、排序或多个可搜索列，你可能需要对代码进行扩展或使用专门的jQuery插件，如DataTables，它提供了更丰富的功能和定制选项。 总的来说，"jQuery...
JavaScript下拉框筛选可搜索
11-29
JavaScript 下拉框筛选功能是一种常见的用户界面交互设计，它允许用户在下拉菜单中通过输入关键字来快速查找和选择目标选项。这种功能在网页表单、动态选择和数据过滤等场景中广泛应用，极大地提升了用户体验。在...
JS实现表格数据各种搜索功能
Mikyou的专栏
02-28 8211
JS实现表格数据各种搜索功能(忽略大小写,模糊搜索,多关键搜索)               window.onload=function(){     var oTab=document.getElementById("tab");     var oBt=document.getElementsByTagName("input");     oBt[1].onclick
jQuery基于Layui下拉框搜索提示列表代码
06-10
获取到输入的文本后，对下拉框中的每个li元素进行匹配，如果匹配成功，则显示该元素，否则隐藏。这里可以利用正则表达式进行中文和拼音首字母的匹配。 4. **Layui的辅助方法**：Layui提供了诸如`layui.form`、`...
js基础 - 查找/忽略大小 - 查找/模糊查询 - 查找/多关键字 - 查找/筛选 - 查找
sweetllh的博客
04-24 1162
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <input type="text" value="输入需要查找的人名" id="studentName" />
Java与MogoDB之间查询数据并运用正则表达式模糊查询，MogoDB中Document
王小六4ever’s poke
05-07 1583
如果你是看了菜鸟教程上的链接，那下面我的东西是值得你使用的。    很奇怪的是，在网上搜到的java与mogodb链接有两种方式，一种是使用一系列mogodb前缀的方法，详见菜鸟教程，一种就是直接是使用db类的对象进行连接，我个人推荐菜鸟教程上的东西，因为比较全面同时讲解清晰，百度上其他一堆说实话不是没用，只不过就是太乱了，没有解释，解释不清。    闲话少说，直接看代码，这个java代码实现的就...
（33）DOM应用之搜索表格中的内容（模糊搜索）
虚心求学_一点一滴
07-21 1424
基本思路：使用search()函数，只需要输入要搜索的内容的一部分就可以搜索出相应的记录，从而
js模糊查询
CQXXTXX的博客
11-13 290
js模糊查询
js小结
qq_23846795的博客
09-08 184
【 for/in】 语句：循环遍历对象的属性。for循环in（遍历）某对象.for (x in person) for (变量 in 对象) { 在此执行代码 } 【innerHTML】属性。几乎所有的元素都有innerHTML属性，获取HTML当前标签的起始和结束 里面的内容。 document.getElementById("demo").innerHTM
js查找HTML元素
qq_42238554的博客
02-26 2835
获取某个元素的ID document.getElementById(“myid”)
js 常用关键字及方法
wang2008start的专栏
06-10 758
 让我狂郁闷的js，今天终于在网上找了点东西，希望能对我有帮助！！！js 常用关键字及方法 1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,do
JS关键字和保留字小结
adobe1992
08-09 2142
1 关键字 break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with 2 保留字 abstract boolean byte char class
js表格应用---高亮显示搜索
dfc_xiaoke的博客
09-19 620
这个代码实现js表格中搜索某项内容，并用高亮颜色显示，类似与百度搜索输入关键字就可以在表格中进行搜索 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表格搜索&lt;/title&gt; &lt;/head&gt; &am
帮我用layui实现一个有多个关键字的自适应搜索表格
03-22
好的，我可以帮你实现一个有多个关键字的自适应搜索表格。你可以使用 layui 的 table 组件和 form 组件来实现。首先，你需要在页面中引入 layui 的相关文件： ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> ``` 然后，你需要在页面中添加一个 table 元素和一个 form 元素： ```html <table id="table" lay-filter="table"></table> <form class="layui-form" lay-filter="form"> <div class="layui-form-item"> <div class="layui-input-inline"> <input type="text" name="keyword1" placeholder="关键字1" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <input type="text" name="keyword2" placeholder="关键字2" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <button class="layui-btn" lay-submit lay-filter="search">搜索</button> </div> </div> </form> ``` 接下来，你需要在 JavaScript 中初始化 table 和 form 组件，并实现搜索功能： ```javascript layui.use(['table', 'form'], function() { var table = layui.table; var form = layui.form; // 初始化 table 组件 table.render({ elem: '#table', url: '/api/data', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '名称'}, {field: 'desc', title: '描述'} ]] }); // 监听 form 表单的提交事件 form.on('submit(search)', function(data) { // 获取表单数据 var keyword1 = data.field.keyword1; var keyword2 = data.field.keyword2; // 重新加载表格数据 table.reload('table', { where: { keyword1: keyword1, keyword2: keyword2 } }); // 阻止表单的默认提交行为 return false; }); }); ``` 在这段代码中，我们使用了 table.reload() 方法来重新加载表格数据，并传递了搜索关键字作为参数。注意，我们需要在 table 元素中添加一个 lay-filter 属性，以便在 reload() 方法中使用。 至此，一个有多个关键字的自适应搜索表格就完成了。你可以根据自己的需求修改表格的样式和数据源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值