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样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{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;}

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

});

});

观察效果

如果表中有相应记录

如果表中并无相应记录

jquery获取html元素的高度使用height()方法即可。

定义和用法：

height() 方法返回或设置匹配元素的高度。

返回高度：

返回第一个匹配元素的高度。

如果不为该方法设置参数，则返回以像素计的匹配元素的高度。

语法：

$(selector)height(length)

例如：

$("btn1")click(function(){

alert($("p")height());

});

设置高度：

设置所有匹配元素的高度。

语法：

$(selector)height(length)

例如：

$("btn1")click(function(){

$("p")height(50);

});

$(function(){

       var tds = "";

       $("table tr")each(function(){

        tds = tds+$(this)find("td")eq(0)text();        

       });

       alert(tds);

     })

注：eq(0)是获取的每个tr中的第一个td，值根据需要自己修改即可。

$("#maintable td")click(function(){

var row = $(this)parent("tr")prevAll()length+1;

var colum = $(this)prevAll()length+1;

alert('选中的是第'+row+'行，第'+colum+'列。');

$(this)parent("tr")attr("style","background-color:#FF0000");

});

以上就是关于jquery如何实现一个表格的筛选,也就是按条件查找筛选全部的内容，包括:jquery如何实现一个表格的筛选,也就是按条件查找筛选、使用jquery动态添加表格的行之后，如何获取表格高度、怎样用jquery取到表格中的一列所有值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！