搜尋
首頁web前端js教程table表格內對某列內容進行搜尋篩選步驟詳解

這次帶給大家table表格內對某列內容進行搜尋篩選步驟詳解,table表格內對某列內容進行搜尋篩選的注意事項有哪些,下面就是實戰案例,一起來看一下。

往往有些時候,我們把資料從資料庫讀取出來,顯示到table裡面,而此時來了個新需求,要在一個搜尋框內輸入關鍵字,表格的內容進行即時的篩選。

而即時觸發進行資料庫的查詢,再回調顯示,就顯得慢,拖累伺服器,降低使用者體驗度,這時,要是有個純js操作,進行表格某列的即時篩選,這樣既能提高搜尋速度,也不用佔用伺服器資源,用戶自然也滿意。

實作如下,先看效果圖,

開始狀態:

#在輸入框內輸入'e',表格即時進行篩選,篩選表格內包含有'e'的行,沒有'e'的進行隱藏,使用在線HTML/JS/css運行工具http://tools.jb51. net/code/HtmlJsRun,測試運行效果如下圖所示:

#實作程式碼:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title> JS搜索筛选table列</title>

<script>
function onSearch(obj){//js函数开始
  setTimeout(function(){//因为是即时查询,需要用setTimeout进行延迟,让值写入到input内,再读取
    var storeId = document.getElementById(&#39;store&#39;);//获取table的id标识
    var rowsLength = storeId.rows.length;//表格总共有多少行
    var key = obj.value;//获取输入框的值
    var searchCol = 0;//要搜索的哪一列,这里是第一列,从0开始数起
    for(var i=1;i<rowsLength;i++){//按表的行数进行循环,本例第一行是标题,所以i=1,从第二行开始筛选(从0数起)
      var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行,列的值
      if(searchText.match(key)){//用match函数进行筛选,如果input的值,即变量 key的值为空,返回的是ture,
        storeId.rows[i].style.display=&#39;&#39;;//显示行操作,
      }else{
        storeId.rows[i].style.display=&#39;none&#39;;//隐藏行操作
      }
    }
  },200);//200为延时时间
}
</script>

<p> <input></p>
                                                                                        
name  
good  
better  
best  
bad  
worse  
worst  

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

NodeJs手機存取本地伺服器案例分析

vue中$emit 與$on父子兄弟元件操作詳解

以上是table表格內對某列內容進行搜尋篩選步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何利用PHP函数进行搜索和过滤数据?如何利用PHP函数进行搜索和过滤数据?Jul 24, 2023 am 08:01 AM

如何利用PHP函数进行搜索和过滤数据?在使用PHP进行开发的过程中,经常需要对数据进行搜索和过滤。PHP提供了丰富的函数和方法来帮助我们实现这些操作。本文将介绍一些常用的PHP函数和技巧,帮助你高效地进行数据的搜索和过滤。字符串搜索PHP中常用的字符串搜索函数是strpos()和strstr()。strpos()用于查找字符串中某个子串的位置,如果存在,则返

PHP如何对接淘宝商品搜索API文档PHP如何对接淘宝商品搜索API文档Jul 01, 2023 pm 10:16 PM

PHP如何对接淘宝商品搜索API文档淘宝是中国最大的电子商务平台之一,拥有庞大的商品库存和用户群体。对于开发者来说,通过对接淘宝的API接口,可以获取商品信息、推广活动以及进行交易等功能,从而实现个性化的商业应用。本文将介绍如何使用PHP语言对接淘宝商品搜索API,帮助开发者快速构建自己的电商应用。第一步:注册成为淘宝开发者在开始之前,需要先注册成为淘宝开发

Laravel开发:如何使用Laravel Scout实现全文搜索?Laravel开发:如何使用Laravel Scout实现全文搜索?Jun 14, 2023 am 10:14 AM

Laravel开发:如何使用LaravelScout实现全文搜索?LaravelScout是一个Laravel的全文搜索解决方案,它是一个流行的开源软件,它可以让开发者轻松地实现高效的全文搜索功能。在这篇文章中,我们将介绍如何使用LaravelScout来实现全文搜索功能。安装LaravelScout首先,我们需要安装LaravelScout。可以

如何使用PHP ZipArchive实现对压缩包的文件过滤和搜索?如何使用PHP ZipArchive实现对压缩包的文件过滤和搜索?Jul 23, 2023 pm 08:34 PM

如何使用PHPZipArchive实现对压缩包的文件过滤和搜索?概述在Web开发中,我们经常需要对压缩包文件进行处理,包括过滤和搜索。PHP提供了ZipArchive扩展,它使我们能够轻松地对压缩包进行操作。本文将教您如何使用PHPZipArchive扩展来实现对压缩包文件的过滤和搜索功能。步骤首先,确保您的PHP环境已启用ZipArchive扩展。您可

如何在uniapp中实现关键字搜索如何在uniapp中实现关键字搜索Jul 05, 2023 am 08:53 AM

如何在uniapp中实现关键字搜索在当前信息爆炸的时代,搜索已经成为我们获取所需信息的重要方法之一。在移动端应用开发中,如何在uniapp中实现关键字搜索,提供用户便捷的搜索功能,是一个非常重要的技术挑战。本文将介绍在uniapp中实现关键字搜索的方法,并提供代码示例供参考。一、创建搜索框组件首先,我们需要在uniapp中创建一个搜索框组件,用于用户输入关键

UniApp实现搜索功能的配置与实现技巧UniApp实现搜索功能的配置与实现技巧Jul 04, 2023 pm 05:15 PM

UniApp实现搜索功能的配置与实现技巧随着移动互联网的迅速发展,搜索功能已经成为了几乎每一个应用都必备的功能之一。而对于基于Vue.js的多平台应用开发框架UniApp来说,实现搜索功能也变得更加简单和高效。本文将介绍UniApp中搜索功能的配置与实现技巧,并且附带代码示例,帮助读者快速上手。一、配置搜索功能在uni-app项目的页面文件夹中创建一个搜索页

react 怎么实现按条件搜索react 怎么实现按条件搜索Dec 28, 2022 pm 04:08 PM

react实现按条件搜索的方法:1、在state里定义一个对象;2、设置下拉框点击事件onChange,用于接收每选择一个下拉框都进行相应的ID保存;3、把对象附加到接口请求参数上即可。

如何在Java后端功能开发中实现搜索功能?如何在Java后端功能开发中实现搜索功能?Aug 05, 2023 am 11:09 AM

如何在Java后端功能开发中实现搜索功能?搜索功能是现代应用程序中必不可少的一个重要功能。无论是在电商平台中搜索商品,还是在社交媒体中搜索朋友,搜索功能都为用户提供了便捷和高效的信息获取方式。在Java后端开发中,我们可以利用各种技术和库来实现搜索功能。本文将介绍一种常用的实现搜索功能的方法,并以Java语言为例给出代码示例。在Java后端开发中,我们通常会

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中