jQuery应用操作之---表格
2016-07-12 20:06
501 查看
示例:
1、隔行变色:
CSS代码:
.even{background:red};
.odd{background:green};
然后分别给奇偶行添加样式如下:
$(function(){
$("tr:even").addClass(even);
$("tr:odd").addClass(odd);
});
上述代码会吧表头也算进去,这里需要排除表头<thread>中的<tr>,如下:
$(function(){
$("<tbody>tr:even").addClass(even);
$("<tbody>tr:odd").addClass(odd);
});
如果需要对选中行执行高亮,如下:
$("tr:contains('张三')").addClass("selected");
2、内容筛选
例如要筛选出含有文本“李”的表格行:
$(function(){
$("table tbody tr").hide()
filter(":contains('李')").show();
});
所以,文本框中输入“李”时,就会筛选出相应的表格行,执行代码如下:
$(function(){
$("filterName").keyup(function(){
$("table tbody tr").hide()
filter(":contains('"+($(this).val())+"')").show();
}).keyup();
});
<table> <thread> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thread> <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> </tbody> </table>
1、隔行变色:
CSS代码:
.even{background:red};
.odd{background:green};
然后分别给奇偶行添加样式如下:
$(function(){
$("tr:even").addClass(even);
$("tr:odd").addClass(odd);
});
上述代码会吧表头也算进去,这里需要排除表头<thread>中的<tr>,如下:
$(function(){
$("<tbody>tr:even").addClass(even);
$("<tbody>tr:odd").addClass(odd);
});
如果需要对选中行执行高亮,如下:
$("tr:contains('张三')").addClass("selected");
2、内容筛选
例如要筛选出含有文本“李”的表格行:
$(function(){
$("table tbody tr").hide()
filter(":contains('李')").show();
});
所以,文本框中输入“李”时,就会筛选出相应的表格行,执行代码如下:
$(function(){
$("filterName").keyup(function(){
$("table tbody tr").hide()
filter(":contains('"+($(this).val())+"')").show();
}).keyup();
});
相关文章推荐
- jQuery应用操作之---复选框
- jquery ajax提交表单从action传值到jsp实现小结
- 关于jQuery 中cookie对象的使用方法说明
- jQuery+三级联动菜单
- jQuery(1)
- JQuery Easy Ui dataGrid 数据表格
- jquery设置select选中的文本
- 使用js/jquery查找iframe中的
- Jquery三
- jQuery基础学习(一)
- Jquery二
- Jquery 一
- JQuery 树形表格插件使用
- 10款高质量的jQuery表单验证插件
- jquery实现点击div空白处隐藏该div
- JQuery AJAX中的$.get()的callback返回参数
- +function ($) { "use strict";}(window.jQuery);全面分析
- jquery $.trim()方法使用介绍
- jquery判断图片加载完毕
- Jquery与CSS选择器参考手册