Question

jquery如何实现一个表格的筛选,也就是按条件查找筛选

例如：我要按“商家名”来查找，请问该怎么实现，代码要怎么写呢，没有思路，求指教，谢谢！！





Answer 1

1、首先新建html文档，向下查找兄弟标签：.next()。

2、jquery支持链式操作，向下查找兄弟标签的兄弟标签：.next().next()。

3、接着向下查找所有兄弟标签：nextAll()，向下查找一直找到某个条件为止：nextUntil('条件')。

4、向上查找兄弟标签：.prev()，向上查找所有兄弟标签：prevAll()，向上查找一直找到某个条件为止：prevUntil('条件')。

5、最后查找父标签：parent()，查找所有父标签：parents()，如果没有人拦着，会一直找找到最上面的父标签（没什么用），条件满足时停止查找：parentsUntil('body') 。

Answer 2

使用jquery的each()方法遍历单元格，如果满足条件则进行相应的操作

$(selector).each(function(index,element))

实例演示：在表格中按姓名查找记录，找到则突出显示，否则给出提示

1. 创建Html元素

   <div class="box">
   	<span>实例演示：在表格中按姓名查找记录</span><br>
   	<div class="content">
   		姓名:&nbsp;<input type="text" name="name">&nbsp;<input type="button" value="查找">
   	    <table>
   	        <tr><td>张三</td><td>175</td><td>140</td></tr>
   	        <tr><td>李四</td><td>170</td><td>120</td></tr>
   	        <tr><td>王五</td><td>185</td><td>160</td></tr>
   	    </table>
   	</div>	
   </div>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
   input[type='text']{width:100px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}
   input[type='button']{height:30px;margin:10px;padding:5px 10px;}
   table{border-collapse:collapse;}
   td{width:80px;height:30px;line-height:30px;text-align:center;border:1px solid green;}
   .selected{font-weight:bold !important; background: #ff99cc !important;color:#fff;}

3. 编写jquery代码

   $(function(){ 
   	$(":button").click(function() {
   		$("table tr").removeClass('selected');   // 还原样式
   		name = $("input[name='name']").val();    // 要查找的名字
   		flag = true;                             // 表示未查到目标
   		$("table tr").find("td:first").each(function() {
   			if($(this).html()==name){            // 如果找到了
   				$(this).parent("tr").addClass('selected');    // 为整行设置样式
   				flag = false;                    // 将未找到标记设为false
   				return false;                    // 提前终止循环
   			}
   		});
   		if(flag)                                 // 如果没找到就给出提示
   			alert("查无此人");  
   	});
   });

4. 观察效果

• 如果表中有相应记录

  

• 如果表中并无相应记录

  

Answer 3

回复 chinaren_1123：你给点具体代码才好举例，大致思路就是
var input = $(input).val(); //记录输入的商家名
var tds = $("table tr>td"); //取商家名那一列
for(var i = 0; i < tds.length; i++){
var td = $(tds[i])
if(td.html().indexOf(input) == -1){ //如果商家名这列总某行内容不包含输入的商家名
td.parent().hide(); //隐藏这行
}
}
一般筛选是在后台服务端代码级别，不是前台做的，为了分页

Answer 4

你这是用什么软件?EXCEL吗?如果是的话,直接点击A和1左上角那个空格处,选择下拉菜单,数据=>筛选==>自动筛选,就OK了.每个栏位都可以下条件,也可以多条件同时筛选.

Answer 5

页面表单提交查询条件（也就是这个商家名）到后台，然后传到sql，like '%商家名%'，然后再回来展示，好吧 如果说要前端过滤的话 楼下说的对 = =#