jQuery应用操作之---表格

标签：

示例：

<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应用操作之---表格

标签：

原文地址：http://www.cnblogs.com/hunterCecil/p/5664710.html