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

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

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

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

创建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>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box>span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

input[type='text']{width:100pxpadding:5px 10pxmargin:5px 0border:1px solid #ff9966}

input[type='button']{height:30pxmargin:10pxpadding:5px 10px}

table{border-collapse:collapse}

td{width:80pxheight:30pxline-height:30pxtext-align:centerborder:1px solid green}

.selected{font-weight:bold !important background: #ff99cc !importantcolor:#fff}

编写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("查无此人")  

})

})

观察效果

如果表中有相应记录

如果表中并无相应记录

var ajaxurl = path + "\/json/a.json"

url:ajaxurl,

他这里是把json格式的数据保存在一个页面了，实际应用中你不需要这种的，就是传个url+参数，去后台读取数据库，然后返回一个数组，前台显示。 不要照搬别人的方法，$.post

$.ajax这里的方法你百度一下，看看使用方法就能看懂

var min = $('#min').val()

var max = $('#max').val()

///////////注意日期所在列下标

var date = new Date(data[4]).getTime()//日期列1

var date1 = new Date(data[5]).getTime()//日期列2

///////////

if (rx.test(min) &&rx.test(max)) {

min = new Date(min).getTime()

max = new Date(max).getTime()

///////在这里增加date1的对比

return (date >= min &&date <= max) ||

(date >= max &&date <= min)//先后时间填写反，如果按照字段说明，那么去掉这个判断

}

---