表格内容的筛选

最新推荐文章于 2023-04-13 19:57:52 发布
最新推荐文章于 2023-04-13 19:57:52 发布
阅读量164 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45683093/article/details/103225782
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格内容的筛选</title>
<script type="text/javascript" src="jss/jquery-1.3.2.min.js"></script>
</head>
<body>
<table width="260" border="1" align="center">
  <thead align="center" valign="bottom">
  <tr>
    <td colspan="2">搜索：<input type="text" name="keyword" id="keyword" /></td>
  </tr>
  	<tr bgcolor="#B2B2B2">
    <td>姓名</td>
    <td>成绩</td>
  </tr>
  </thead>
  <tbody align="center" bgcolor="#FFFF88">
  
  <tr>
    <td>王一博</td>
    <td>97</td>
  </tr>
  <tr>
    <td>肖战</td>
    <td>91</td>
  </tr>
  <tr>
    <td>雷佳音</td>
    <td>91</td>
  </tr>
  <tr>
    <td>王俊凯</td>
    <td>84</td>
  </tr>
  <tr>
    <td>王源</td>
    <td>97</td>
  </tr>
  <tr>
    <td>易烊千玺</td>
    <td>88</td>
  </tr>
  </tbody>
</table>
<script>
$(function(){
	$("#keyword").keyup(function(){
		if($("#keyword").val() != ''){
			$("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show();   // 显示指定元素
		}
	})
})
</script>
</body>
</html>
javaScript小主
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html表格筛选,js实现表格筛选功能
weixin_42517623的博客
06-05 5017
本应用就两个主要实现：1.表格的id 和 class之间的命名关系请看图： 将组名和个人信息联表格联系起来，这样会很好的操作表格HTML代码：前台设计组张三男浙江宁波李四男浙江宁波胡歌男浙江宁波前台开发组李三男浙江宁波张无忌男浙江宁波孔子男浙江宁波2.就是筛选功能的使用：使用filter联合contains将输入框的字加入contains进行筛选javascript代码：//设置列表查询$("#f...
对表格数据筛选
weixin_57769777的博客
09-19 239
对表格的数据的筛选主要的内容其实就是先把数据都查询出来并且显示在页面上，然后页面可以有一个文本框，然后根据文本框输入的内容来查询符合条件的数据。 第一步就是先把数据查询出来，因为数据都是动态的，所以就不可以直接在页面布局上把数据定死。所以这里就用了layui加载表格的的方法来把查询到的数据显示在页面上，如下截图是larui加载表格的方法（更多内容可以访问layui网站）。 如上截图的大概内容就是:先声明两个数据变量-->然后界面加载的时候开始加载数据表格-->“elem”属性是接收数据表
html表格搜索功能,如何在HTML表格上执行实时搜索和过滤
weixin_33217004的博客
06-04 884
小编典典我创建了这些示例。简单的indexOf搜索var $rows = $('#table tr');$('#search').keyup(function() {var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();$rows.show().filter(function() {var text = $(this)....
一篇文章搞定表格筛选功能
爱蹦哒的咸鱼的博客
02-22 165
一篇文章搞定关于表格的所有功能
js实现table内 某列的内容进行即时筛选
热门推荐
没有追求的轮子工人
06-20 1万+
往往有些时候，我们把数据从数据库读取出来，显示到table里面，而此时来了个新需求，要在一个搜索框内输入关键字，表格的内容进行即时的筛选。 而即时触发进行数据库的查询，再回调显示，就显得慢，拖累服务器，降低用户体验度，这时，要是有个纯js操作，进行表格某列的即时筛选，这样既能提高搜索速度，也不用占用服务器资源，用户自然也满意。 实现如下，先看效果图， 开始状态： 在输入框内输入
HTML表格搜索和选中数据,elementUI+vue表格组件（支持多选、分页、选中回显、搜索、增删改）...
weixin_33091939的博客
06-04 413
功能本组件能实现表格多选，分页，分页选中回显，新建、删除、修改、查询。写在前，有问题欢迎问，有更好的建议欢迎留言~~~使用时要注意将后台接口的情况，根据情况修改代码。但是！！！！不要只做复制粘贴，报错了就来乱喷的喷子如果对你有帮助，希望你给我喜欢 ！收藏！git上点星星！哈哈哈哈或哈哈哈哈(不要脸了)实现效果1.png2.png3.png思路要点将组件的操作产生的参数全部返回父组件，由父组件处理接...
JS实现table表格内针对某列内容进行即时搜索筛选功能
10-18
主要介绍了JS实现table表格内针对某列内容进行即时搜索筛选功能,涉及javascript针对HTML元素的遍历、属性动态修改相关操作技巧,需要的朋友可以参考下
点击按钮-显示相应的筛选效果
m0_48893127的博客
04-13 199
点击按钮，进行筛选，简易版
前端列表筛选效果
萧逸才的博客
04-03 3347
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }
列表的渲染、过滤（筛选）、排序操作
weixin_64770583的博客
07-13 742
列表的渲染、过滤（筛选）、排序操作
Bootstrap-table 表头筛选控件
Moxice的博客
11-18 1万+
Bootstrap-table 表头筛选控件,根据Bootstrap-table API,在表头添加筛选排序，支持文本搜索，数值搜索，日期搜索，单选和复选。 依赖js jQuery,Bootstrap,Bootstrap-table,select2 筛选类型说明 1. 文本类型（text） 提供模糊搜索功能，根据输入的参数模糊匹配返回对应的结果 2. 数值类型(num) 提供区间搜索功能，所搜列必须为数值，可以搜索最小值和最大值之间的结果，也可以搜索所有大于最小值或小于最大值的结果。
对表格数据的数据筛选
weixin_57769777的博客
07-10 697
对表格的数据的筛选主要的内容其实就是先把数据都查询出来并且显示在页面上，然后页面可以有一个文本框，然后根据文本框输入的内容来查询符合条件的数据。 第一步就是先把数据查询出来，因为数据都是动态的，所以就不可以直接在页面布局上把数据定死。所以这里就用了layui加载表格的的方法来把查询到的数据显示在页面上，如下截图是larui加载表格的方法（更多内容可以访问layui网站）。 如上截图的大概内容就是:先声明两个数据变量-->然后界面加载的时候开始加载数据表格-->“elem”属性是接收数据表
vue + element 表格内容筛选、表格列展示隐藏
最新发布
05-13
Element UI的表格组件功能强大，可以实现多种定制化需求，如内容筛选和列的展示隐藏。下面将详细介绍这两个功能的实现。 一、表格内容筛选 在Vue项目中，Element UI的`<el-table>`组件提供了数据过滤的功能。首先，...
基于jquery实现表格内容筛选功能实例解析
10-22
此时，实现表格内容筛选功能就显得尤为重要，它可以帮助用户快速定位到所需的数据。本文将详细讲解如何基于jQuery实现这一功能。 首先，筛选功能的核心是通过监听用户的输入，实时更新表格显示的内容。在这个实例中...
jquery表格内容筛选实现思路及代码
10-27
在本文中，我们将探讨如何使用jQuery实现表格内容的筛选功能。这个功能对于数据展示和用户交互有着重要的作用，特别是在处理大量数据时，能够帮助用户快速定位到所需的信息。我们将介绍两种不同的实现方法。 **方法...
jquery表格插件Tablesorter插件 表格内容筛选与分页筛选
09-22
本文将深入探讨Tablesorter插件的核心特性以及如何实现表格内容筛选与分页筛选。 **1. Tablesorter插件介绍** Tablesorter是一款轻量级的JavaScript库，它可以自动检测表格中的数据类型并进行相应的排序。用户只需...
Html前端基础（select下拉选标签、table表格标签）
Viewinfinitely的博客
04-24 4216
文章目录一、select 下拉选标签二、table表格标签三、练习代码 继续前两篇的Html前端基础的内容，本文主要关于 <select>下拉选标签和 <table>表格标签 一、select 下拉选标签 1、form表单补充 checked 会默认选择一个 disabled 使用户在选框上无法进行操作 <textarea></textarea> ...
WPS开发 js宏开发 筛选表格数据 导出到新表格
yuan_618859的博客
02-05 3620
wps开发 js宏编程 筛选表格数据 导出到新的表格
对页面中HTML的多表格筛选js
shizg1994的博客
02-23 1599
对页面中HTML的多表格筛选js
jq实现html表格内容筛选
06-10
可以使用jq的筛选器来实现html表格内容筛选。以下是一个示例代码： ```html <th>Name <th>Age <th>Country <td>John <td>30 <td>USA <td>Jane <td>25 <td>Canada <td>Bob <td>40 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值