用jQuery生成可交互的表格——维护表格、设置表格分页

为表格中的行添加悬停效果：

       在表格的使用中，我们可以为表格中的行添加悬停效果，让表格对用户的鼠标悬停动作做出反应以方便用户阅读。下面的例子中，当用户把鼠标放到表格中任意一行时，我们通过为当前行设置另一种背景色轻松的实现了这个效果。HTML代码如下：

      （1）、在document的ready事件处理函数中，为每个tr元素绑定hover事件。这个选择器的好处是它会自动选取表格中的所有行，然后用寥寥几行的代码为它们绑定hover事件处理函数。

       $(document).ready(function(){

            $('tr').hover(function(){

            },function(){

            });

       });

       (2)、往hover事件处理函数中添加两条语句，一条加到mouseenter事件中，一条加到mouseleave事件中。使用this关键字引用触发事件所在的当前tr元素，在mouseenter事件中将行的背景色设置成粉红色，在mouseleave事件中把行的背景色变回白色。

       $(document).ready(function(){

            $('tr').hover(function(){

                $(this).css('background','pink');

            },function(){

                $(this).css('background','white');

            });

       });

网页效果如图所示：

为表格中的行添加高级悬停效果：

      有时候当用户在某行上悬停时显示编辑选项，这种用户页面的解决方案经常用于即时修改数据的场合。想要达到这种效果，首先在document的ready事件处理函数中为所有的tr元素绑定hover事件。像上面的例子一样添加两条选择器语句。在mouseenter事件中，使用this关键字选中当前元素，接着用append方法在dom中插入一个a标签。当用户在某一行上悬停时，第一条语句为该行的每一列追加Edit Me链接，第二条语句在鼠标离开时将这些追加元素移除。

       $(document).ready(function(){

            $('tr').hover(function(){

                $(this).children().append('<div class="editme"><a href=" ">Edit Me</a></div>;

            },function(){

                $('.editme').remove();

            });

       });

维护表格数据：

        这里说的维护是指添加、删除和过滤表格数据，这些行为都会改变DOM。在这里主要实现的效果有：

        1、在表格中的第一行或最后一行插入一行

        2、基于行号（索引）在具体某一行之后添加一行

        3、在特定内容行之后增加一行

        4、使用过滤器选择器删除一行

        5、基于行号（索引）删除一行

        6、删除具有特定内容的行

1、在表格第一行或最后一行之后增加一行：

      （1）、新建一个special类，为它设置一下样式，这样在把它添加到表格之后便能突出显示。

       .special{background:#6AAF18;text-align:center;font-size:22px;color:#fff;font-weight:bold;}

       (2)、在document的ready事件处理函数中添加一行语句，选中第一个tr，然后使用。after（）方法在该行之后插入今日特价信息。

       $(document).ready(function(){

            $('products tr:first').after('<tr><td colspan="4" class = "special">Special Offer TODAY</td></tr>');

       });

       还有一种可选方案，即使用：last过滤器在表格的最后一行之后展示特定内容，方法类似。

2、使用过滤器选择器删除一行

       在操作表格的过程中经常遇到需要删除内容的时候，在删除某个产品、图片、文本或者DOM中的某类元素时，可以使用jQuery的.remove（）方法，它负责从DOM中删除匹配选择器的元素。

       在document的ready事件处理函数中，使用选择器选中元素，然后调用.remove()方法。这里删除表格中的最后一行，代码如下：

       $(document).ready(function(){

           $('tr:last').remove();

       });

3、基于索引在某一行之后增加一行

       正如可以基于表格行的位置找出首行和末行，也一样可以基于行号（索引）找出具体某一行，然后在它的前面或后面插入一行。在选择器中使用:eq（索引值)【:eq（）是一个基于索引的过滤器，根据索引定位元素。】过滤器可以找出索引值中的所有元素。比如下面的代码，可以找出索引值为5的所有元素，并在这些元素的后面插入Special Offer TODAY。

       $("tr:eq(5)").after('<tr><td colspan="4">Special Offer TODAY</td></tr>');

4、基于索引删除某行

       类似于基于索引添加行。在DOM选中索引值的所有元素，然后调用remove方法删除它们。如删除索引值为1的所有元素：

       $("tr:eq(1)").remove();

5、包含特定内容的行之后追加信息

       如果需要在包含特定内容的行之前或之后插入一行，可以使用:contains过滤器。注意：:contains过滤器区分大小写。如果目标字符串都是小写，指定时却用了大写的过滤字符，就不会发生任何匹配。

      如想要在包含clothing的行中添加一行，代码如下：

      $('tr':contains("clothing")').after('<tr><td colspan="4" class="special">Special Offer TODAY</td></tr>');

6、基于元素内容删除一行

       还是上面的例子，选中包含clothing的字符串的所有tr元素，然后将它们从DOM中移除：

       $('tr').remove(":contains('clothing')");

使用jQuery设置表格分页：

       分页是按照页面大小将内容分成相应大小的片段。利用分页技术每次可只呈现少数结果，便于用户导航和理解。

       （1）、在创建分页脚本之前，先准备一些分页需要的数据。这里使用表格。代码如下：

    <div class="container">
<table border="0" cellpadding="0" cellspacing="0">
    <tr><th>Item #</th>  <th>Category</th>  <th>Product</th>  <th>Price</th>  <th>Status</th></tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" id="data">
<tr><td>1</td>   <td>Clothing</td>      <td>North Face Jacket</td>  <td>$189.99</td> <td>In-stock</td></tr>
<tr><td>2</td>   <td>Shoes</td>         <td>Nike</td>                        <td>$59.99</td>   <td>In-stock</td></tr>
<tr><td>3</td>   <td>Electronics</td>   <td>LED TV</td>                 <td>$589.99</td>  <td>Out of stock</td></tr>
<tr><td>4</td>   <td>Sporting Goods</td>  <td>Ping Golf Clubs</td>  <td>$159.99</td>   <td>In-stock</td>  </tr>
<tr><td>5</td>   <td>Clothing</td>       <td>Sweater</td>                  <td>$19.99</td>     <td>In-stock</td></tr>
<tr><td>6</td>   <td>Clothing</td>       <td>North Face Jacket</td>   <td>$189.99</td>   <td>In-stock</td></tr>
<tr><td>7</td>   <td>Shoes</td>          <td>Nike</td>                        <td>$59.99</td>      <td>In-stock</td></tr>
<tr><td>8</td>   <td>Electronics</td>   <td>LED TV</td>                  <td>$589.99</td>    <td>Out of stock</td></tr>
<tr><td>9</td>   <td>Sporting Goods</td>   <td>Ping Golf Clubs</td>  <td>$159.99</td>  <td>In-stock</td></tr>
<tr><td>10</td>  <td>Shoes</td>         <td>Nike</td>                        <td>$59.99</td>        <td>In-stock</td></tr>
<tr><td>11</td>  <td>Electronics</td>   <td>LED TV</td>                 <td>$589.99</td>      <td>Out of stock</td></tr>
<tr><td>12</td>  <td>Sporting Goods</td>   <td>Ping Golf Clubs</td> <td>$159.99</td>   <td>In-stock</td></tr>
<tr><td>13</td>  <td>Electronics</td>    <td>LED TV</td>               <td>$589.99</td>        <td>Out of stock</td></tr>
<tr><td>14</td>   <td>Sporting Goods</td>  <td>Ping Golf Clubs</td>  <td>$159.99</td>   <td>In-stock</td></tr>
</table>   
    </div>  

      （2）、利用表格中的ID #data选取这个表格，然后在它之后插入一个DIV#nav，使其显示在表格下方。这个DIV的元素用来存放页码链接。

        $('#data').after('div id="nav"></div>');

      （3）、创建变量rowsShown，存放每页展示行数

        var rowsShown = 4;

      （4）、创建变量rowsTotal，获取分页数据的总行数，并将它保存于变量rowsTotal中。在本例中，先匹配#data tr，然后取结果集对象的length属性，值为14.

       var rowsTotal = $('#data tr').length;

      （5）、创建变量numpages，它的值为rowsTotal除以rowsShown。运算结果用Math.ceil这个原生方法进行处理。

       var numPages = Math.ceil(rowsTotal/rowsShown);

      （6）、接下来创建一个for循环，迭代生成用来导航的页码链接。创建变量pageNum，它的值为循环变量i+1，这就保证了页码是从1而不是0开始。页码链接有一个rel属性，它的值即链接的序号，链接文本则设置成pageNum的值

       for(i=o;i<numPages;i++){

           var pageNum = i+1;

           $('#nav').append('<a href= "#" rel=" 'i+1'">'+pageNum+'</a>');

      }

     （7）、添加一条语句隐藏表格#data中所有的行

       $('#data tr').hide();

     （8）、选取表格的第一行并将它显示出来。

       $('#data tr:first').show();

      （9）、添加一条语句选取表格#data中的所有行，然后使用jQuery的slice（）方法确保只显示前4行。.slice()方法接受两个参数，一边截取数组的一部分。

       $('data tr').slice(0,rowsShown).show();

     （10）、增加一条语句，选中第一个页码链接，然后为其添加active类。这就保证了页面载入完成后第一个页码处于突出显示状态。

       $('#nav a:first').addClass('active');

      （11）、为导航元素#nav内所有链接绑定click事件处理函数。这个函数控制分页，它是这个脚本的核心部分。

        $('#nav a').bind('click',function(){

        });

      （12）、click事件处理函数的第一条语句，移除所有页码链接的active类

        $('#nav a').bind('click',function(){

            $('#nav a').removeClass('active');

        });

       （13）、然后为当前被单击的页号链接添加类

        $('#nav a').bind('click',function(){

            $('#nav a').removeClass('active');

            $(this),addClass('active');

        });

       （14）、新建变量currPage，保存当前链接的rel属性值（这个值是在前面的for循环中设置的）

        $('#nav a').bind('click',function(){

            $('#nav a').removeClass('active');

            $(this),addClass('active');

            var currPage= $(this).attr('rel');

        });

        （15）、再建一个变量startItem和endItem，它们的值分别是currPage和rowsShown的乘积和startItem和rowsShown的和

        $('#nav a').bind('click',function(){

            $('#nav a').removeClass('active');

            $(this),addClass('active');

            var currPage= $(this).attr('rel');

            var startItem = currPage *rowsShown;

            var endItem = startItem +rowsShown;

        });

       （16）、click事件处理函数中的最后一条语句控制单击页码之后显示哪些记录。使用选择器选取了表格#data的所有行。

        $('#nav a').bind('click',function(){

            $('#nav a').removeClass('active');

            $(this),addClass('active');

            var currPage= $(this).attr('rel');

            var startItem = currPage *rowsShown;

            var endItem = startItem +rowsShown;

            $('#data tr').css('opacity','0.0').hide().slice(startItem,endItem).css('display','table-row').animate({opacity:1},300);

        });

本例的最后效果图如下：