js实现表格数据搜索

本文实例为大家分享了js实现表格数据搜索的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格数据搜索</title>
  <link href="../css/表格数据搜索.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">
<table id="myTable">
  <tr>
    <th>名称</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>
<script src="../js/表格数据搜索.js">
</script>
</body>
</html>

CSS:

#myInput{
  background: url('https://static.runoob.com/images/mix/searchicon.png')no-repeat;
  background-position: 10px 12px;
  width:100%;
  padding: 12px 20px 12px 40px;
  border:1px solid #ddd;
  font-size: 16px;
  margin-bottom: 12px;
  border-radius: 6px;
}
#myTable {
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  border-collapse:collapse;
}
#myTable th,td{
  text-align: left;
  padding:15px 12px;
}
#myTable tr{
  /* 表格添加边框 */
  border-bottom:1px solid #ddd;
}
#myTable tr:hover{
  background-color: #f1f1f1;
}
#myTable th{
  background-color: #f1f1f1;
}

JS:

function myFunction() {
  var myInput=document.getElementById("myInput");
  var filter=myInput.value.toUpperCase();
  var table=document.getElementById("myTable");
  var tr=table.getElementsByTagName("tr");
  //循环列表每一项，查找匹配项
  for(var i=0;i<tr.length;i++) {
    var td = tr[i].getElementsByTagName("td")[0];
    if (td){
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • JS实现table表格内针对某列内容进行即时搜索筛选功能

    JS实现table表格内针对某列内容进行即时搜索筛选功能

    本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能.分享给大家供大家参考,具体如下: 往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选. 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器,降低用户体验度,这时,要是有个纯js操作,进行表格某列的即时筛选,这样既能提高搜索速度,也不用占用服务器资源,用户自然也满意. 实现如下,先看效果图, 开始状态: 在输入框内输入'e',表格即

  • JS实现表格数据各种搜索功能的方法

    本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <script type="text/javascript">    window.onl

  • js实现表格数据搜索

    本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格数据搜索</title> <link href="../css/表格数据搜索.css" rel="external nofollow&quo

  • 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e

  • js实现表格单列按字母排序

    本文实例为大家分享了js实现表格单列按字母排序的具体代码,供大家参考,具体内容如下 类似于列表按字母排序,直接上代码啦~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格单列字母排序</title> <link href="../css/表格数据搜索.css" rel=&qu

  • layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML 搜索输入框 <form class="layui-form"> <div class="layui-input-inlin

  • layui实现显示数据表格、搜索和修改功能示例

    本文实例讲述了layui实现显示数据表格.搜索和修改功能.分享给大家供大家参考,具体如下: <div style="text-align: center" id='btn'> <div class="layui-inline"> <input class="layui-input" name="keyword" id="demoReload" autocomplete=&quo

  • JS实现table表格数据排序功能(可支持动态数据+分页效果)

    asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

  • js动态添加表格数据使用insertRow和insertCell实现

    js动态添加表格数据使用insertRow和insertCell实现

    效果图: 代码: js动态添加表格数据_2.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态添加表格数据_2

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • layui数据表格实现重载数据表格功能(搜索功能）

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 <table id="demo" lay-filter="test"></table> JavaScript部分 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器)

随机推荐