用javascript实现表格数据搜索

最新推荐文章于 2022-03-21 17:35:00 发布
最新推荐文章于 2022-03-21 17:35:00 发布
阅读量1k 收藏 6
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duke_vv/article/details/102825761
版权
这篇博客介绍了如何利用JavaScript实现表格数据的搜索功能，通过用户的输入动态显示匹配的表格选项，从而提高用户体验。内容涵盖了HTML、JavaScript和CSS的实战应用。
摘要由CSDN通过智能技术生成

js的简单练习.
表格将根据用户输入显示相应的选项，剔除无关的选项

HTML JS CSS代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>serc</title>
    <style>
        #myInput{
    

            background-image:
                    url("https://static.runoob.com/images/mix/searchicon.png");
            background-position: 10px 12px;
            background-repeat: no-repeat;
            width: 100%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #dddddd;
            margin-bottom: 12px;

        }
        #myTable{
    
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #dddddd;
            font-size
最低0.47元/天 解锁文章
duke_vv
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现表格数据各种搜索功能
Mikyou的专栏
02-28 8194
JS实现表格数据各种搜索功能(忽略大小写,模糊搜索,多关键搜索)               window.onload=function(){     var oTab=document.getElementById("tab");     var oBt=document.getElementsByTagName("input");     oBt[1].onclick
javascript 中搜索数组的四种方法
热门推荐
CRMEB小程序商城的博客
05-18 2万+
前端经常要通过 javaScript 来处理数组中的数据，其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值，这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。 在 ECMAScript6 之前，最常用的方法就是通过 for 循环来遍历数组中的所有项目并对项目执行操作。现在我们可以通过内置的使用方法来完成在数组中搜索值的常见任务。 本文将介绍 Array.includes()、Array.indexOf()、Array.fiind() 和 Array.filter
html表格中搜索,在HTML表格中搜索 - 合并多个值（下拉，文本字段..）
weixin_28792813的博客
06-05 373
是否可以向表单中添加下拉菜单，并且该函数将从下拉列表中选择的值与文本字段的值组合寻找？在HTML表格中搜索 - 合并多个值(下拉，文本字段..)该代码应用于HTML表格，以便访问者可以在表格中进行搜索。谢谢！ :)function search (phrase, _id){var words = phrase.value.toLowerCase().split(" ");var table = d...
JS实现表格数据各种搜索功能的方法
10-24
主要介绍了JS实现表格数据各种搜索功能的方法,可实现忽略大小写,模糊搜索,多关键搜索等功能,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript 表格数据搜索
Dove_1234的博客
09-09 305
HTML代码 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> <table id="myTable"> <tr class="header"> <th style="width:60%;">名称</th> <th style="width:40%;">城市</th> </tr>
javascript表格查询
.Net程序员
10-22 1309
今天看到web板块有人问此问题，自己在此基础上做了一个Demohtml >   head >   title >   title >   meta http-equiv="Content-Type" content="text/html; charset=gb2312" / >   head >      script language="javaScript" >...  var g_S
用Javascript实现对HTML表格简单的增删查改
秘密基地
08-08 1万+
在网页制作的过程中，有时候需要对表格进行操作，下面是一个简易的表格操作方案：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对表格操作</title> <style type="text/css"> *{ padding:0px; margn:0px; } table#stuRecordT
JavaScript实现动态查询表格
weixin_33691700的博客
03-13 293
JavaScript实现的一个动态查询表格，随着文本框中资料的改变，下边Table中的资料会自动筛选。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE <html> <head> ...
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
layui的数据表格+springmvc实现搜索功能
灰太狼
06-11 1万+
layui的数据表格+springmvc实现搜索功能 没有用过layui可以看看： layui的数据表格+springmvc实现数据显示，分页功能 主要在前端页面加：&lt;div class="demoTable"&gt; 搜索ID： &lt;div class="layui-inline"&gt; &lt;input class="layui-input" n...
Table表格搜索功能
dong__xue的博客
08-08 3209
<button type="submit" class="input-search-btn"> <i class="fa fa-search" aria-hidden="true"></i> </button> <input id="myInput" type="text" onkeyup="myFunction()" class="...
js中数组方法合集
north_katydid的博客
03-21 3953
1、查找数组中包含指定元素的个数 countNum(arr,res) { let newArrays = arr.filter((item)=>{ return item == res; }); return newArrays.length; }, console.log(countNum(['1','2','1','3'] , '1')) // 2
JavaScript - 纯js写一个对表格的简单增删改查操作
tian_tian_gong的博客
10-25 2951
功能: 新增表格数据， 修改表格数据， 删除表格数据。 不完善区: 删除数据之后序号没有做处理 ，表单验证简单的提示警告， 没有文字提醒。 界面: 在线查看 下面是代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;me
js表格应用---高亮显示搜索
dfc_xiaoke的博客
09-19 616
这个代码实现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
js实现table中前端搜索(模糊查询)
weixin_30920513的博客
08-05 2173
项目中用到js前端搜索功能，根据 姓名或姓名 进行 搜索，实现方法如下，遍历table所有行中的某列，符合条件则置tr为display:'',不满足条件置tr为display:none。 代码如下： <html> <head> <title>s表格前端搜索</title> ...
Js获取数据库信息
xulong5000的专栏
06-26 2万+
1:前端View上 创建一个table，如下图： 第一个tr：是中文表的标题 第二个 是 英文版的标题 里面有一个if判断，是为了判断是中午还是英文版本。 真正的内容是 tbody里面 ，这里只需要关心 id=wdglb <tbody style="text-align: left;" id="wdglb"></tbody> 2:Js获取服务端代码...
使用javascript 查询特定的table中的内容
weixin_30553065的博客
07-17 319
使用javascript 查询特定的table中的内容 (HTML示例页面： 下载示例) 页面中有一个table包含两列，数据由后台生成，行数不定：（如图） 原始数据： 现在通过javascript进行查询，效果如下三图： 开始查询 查询中...... 查询得到的自后结果 JAVASCRIPT代码： JS代码 <script...
用layui实现数据表格table搜索静态数据的功能
最新发布
04-25
您可以使用layui的table组件提供的搜索功能来实现这个功能。您需要先定义一个table实例，用静态数组填充数据，然后调用layui的table.render()将数据渲染到表格中。在render()方法中，您可以使用toolbar属性来定义搜索框，然后在search()方法中实现搜索功能。以下是一个简单的示例代码： HTML代码： ``` <table id="myTable" lay-filter="myTable"></table> ``` JavaScript代码： ``` var data = [ { id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 22 }, { id: 4, name: '赵六', age: 24 } ]; layui.use('table', function(){ var table = layui.table; // 填充数据 table.render({ elem: '#myTable', data: data, toolbar: '#toolbar', cols: [ [ { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: '姓名', width: 120 }, { field: 'age', title: '年龄', width: 80 } ] ], page: true }); // 搜索功能 table.on('toolbar(myTable)', function(obj){ if(obj.event == 'search'){ var keyword = $('#search').val(); var result = []; for(var i=0; i<data.length; i++){ if(data[i].name.indexOf(keyword) >= 0){ result.push(data[i]); } } table.reload('myTable', { data: result }); } }); }); ``` 在上面的代码中，定义了一个静态数据数组data。在使用table.render()将数据填充到表格中。在cols属性中定义表头，page属性启用分页功能。在toolbar属性中定义了一个搜索框。在table.on()方法中监听工具栏事件，如果点击了“搜索”按钮，就获取搜索关键字，并遍历数据数组，找到包含关键字的项，组成一个新的数组，然后使用table.reload()重新加载表格数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值