zoukankan      html  css  js  c++  java
  • 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();
    });

  • 相关阅读:
    ASCII到Unicode到UTF-8
    .NET项目引用黄色小三角以及找不到依赖的解决方法
    MongodbHelper
    SqlHelper分享
    C#_02.16_基础七_.NET表达式&运算符
    C#_02.15_基础六_.NET类
    C#_02.14_基础五_.NET类
    C#_02.13_基础四_.NET方法
    C#_02.13_基础三_.NET类基础
    C#_02.12_基础二_.NET类型存储和变量
  • 原文地址:https://www.cnblogs.com/hunterCecil/p/5664710.html
Copyright © 2011-2022 走看看