首页 > 其他分享 >JQ 表格内容过滤

JQ 表格内容过滤

时间:2023-06-26 19:33:41浏览次数:46  
标签:function 长沙 李四 表格 keyup JQ 过滤 浙江 杭州


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){
       $("#filterName").keyup(function(){
	      $("table tbody tr")
					.hide()
					.filter(":contains('"+( $(this).val() )+"')")
					.show();
	   }).keyup();
  })
</script>
</head>
<body>
<div>
<br/>
筛选:
<input id="filterName" />
<br/>
</div>
<table>
	<thead>
		<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
	</thead>
	<tbody>
		<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
		<tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
		<tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
		<tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
		<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
		<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
		<tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
		<tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
		<tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>
	</tbody>
</table>
</body>
</html>

 

效果图:

JQ 表格内容过滤_html


 

 

 

 

标签:function,长沙,李四,表格,keyup,JQ,过滤,浙江,杭州
From: https://blog.51cto.com/u_16171388/6557099

相关文章

  • JQ 可见性过滤选择器
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><!--引入jQuery--><scriptsrc="js/jquery-1.10.1.min.js"type="text/javascript&q......
  • JQ 隔行变色
    <html><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scripttype="text/javascript">window.onload=function(){//页面所有元素加载完毕 varitem=do......
  • Element-table表格末尾按指定列合计的实现方法
    getSummaries(param){const{columns,data}=paramconstsums=[]columns.forEach((column,index)=>{if(index===1){sums[index]='合计'return}constvalues=data.map(it......
  • 通过网关添加过滤器【SpringCloud】
    spring:application:name:gateway#服务名称cloud:nacos:server-addr:localhost:8848#nacos地址gateway:routes:#网关路由配置-id:itemservice#路由id,自定义,只要唯一即可#uri:http://127.0.0.1:8081#路由......
  • jQuery源码浅谈系列---$.attr()
    attr()   1、attr(name)     取得第一个匹配元素的属性值。如果元素没有相应的属性,则返回undefined。  2、attr(properties)     将一个"名/值"形式的对象设置为所有匹配元素的属性。    注:要设置class属性,必须用'className'作为属性名。     举例:......
  • jquery.pngFix
    jquery.pngFix.js应该还出现在部分系统和一些网站上,简单介绍一下吧。 ----------------解决IE6下不支持png图片透明效果 整理了一下网上的一些插件的缺点: 有png作为背景且背景宽高和标签宽高不一致的时候会发生拉伸。配套版本的支持情况1.3.2-------1.5起不兼容。   扩展......
  • 零代码量化投资:用ChatGPT提取企业PDF年报中的多页表格
    企业PDF年报中有很多信息,里面表格很多,所以经常需要提取其中的表格。用ChatGPT来编程实现,非常简单。案例1:提取鑫铂股份募集说明书中的行业主要法律法规及政策表格在ChatGPT输入提示语如下:写一段Python代码,实现提取PDF文件中表格的功能。具体步骤如下:打开PDF文件,文件路径是:F:\金属材......
  • 【Java】修改生成的PDF的表格中文字的字体
    首先导入依赖<dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.10</version></dependency>使用form.setFieldProperty("${表格名字}",&......
  • 1.element表头居中内容左对齐, 2.自定义el-table中新增编辑表格不刷新的问题。
    一、<el-table :header-cell-style="{'text-align':'left'}">...<el-table-column:cell-style="{'text-align':'left'}">...</el-table-column></el-table> 二、this.$se......
  • element表格多选改为单选,且去除表头的多选框
    一、利用el-table自带方法selection-change(当选择项发生变化时触发该事件)关键代码:this.$refs.serialnoTable.clearSelection()this.$refs.serialnoTable.toggleRowSelection(val.pop()) 1.@selection-change="handleSelectionChange" 是重点改变点击选择框后的事件:<el-table......