5.2 表格应用

在CSS技术之前，网页的布局基本都是依靠表格制作，当有了CSS之后，表格就被很多设计师所抛弃。但笔者认为，在进行网页布局时不能盲目地抛弃表格，在该用表格的时候，还要用表格。例如数据列表。用表格来显示非常适合。

下面以表格中几个常用的应用作为示例来讲解。

5.2.1 表格变色

例如一张人员资料表，其HTML代码如下：

[插图]

应用样式后，显示效果如图5-19所示。

[插图]

图5-19 初始化效果

这是一张非常普通的表格，现在需要给表格进行隔行变色操作。

1．普通的隔行变色

首先定义两个样式。

CSS代码如下：

[插图]

然后选择表格奇数行和偶数行分别添加样式，可以使用选择器来完成，代码如下：

[插图]

显示效果如图5-20所示。

[插图]

图5-20 普通的隔行变色

注意：$("tr:odd")和$("tr:even")选择器中索引是从0开始的，因此第1行是偶数。

上面的代码会将表头也算进去，因此需要排除表格头部<thead>中的<tr>，将选择符改成如下代码：

[插图]

显示效果如图5-21所示。

[插图]

图5-21 表格隔行变色

如果还需要将某一行变为高亮显示状态，那么可以使用contains选择器来实现。例如“王五”这行，代码如下：

[插图]

显示效果如图5-22所示。

[插图]

图5-22 高亮显示“王五”这行

2．单选框控制表格行高亮

在以上表格的基础上，在第1列前加上一列单选框，如图5-23所示。

[插图]

图5-23 带单选框的表格

当单击某一行后，此行被选中高亮显示，并且单选框被选中。实现该过程需要以下几个步骤。
（1）为表格行添加单击事件。
（2）给单击的当前行添加高亮样式，然后将它的兄弟行的高亮样式去掉，最后将当前行里的单选框设置为选中。

根据分析，可以写出如下jQuery代码：

[插图]

这样，就可以通过单击每行来实现表格行高亮，同时此行所在的单选框也被选中。

上面代码中使用了end()方法，当前对象是$(this)，当进行addClass(‘selected’)操作时，对象并未发生变化，当执行 siblings().removeClass(‘selected’)操作时，对象已经变为$(this).siblings()，因此后面的操作都是针对这个对象的，如果需要重新返回到$(this)对象，就可以使用end()方法，这样后面的

[插图]

操作就是：

[插图]

而不是：

[插图]

另外，初始化表格的时候，如果默认已经有单选框被选中，那么也需要处理，代码如下：

[插图]

这样当初始化表格的时候，默认已经选中的行将被高亮显示，如图5-24所示。

[插图]

图5-24 默认选中行被高亮显示

注意：$('table :radio:checked').parent().parent().addClass('selected');是通过parent()方法逐步向父节点获取相应的元素的，也可以使用parents()方法直接获取：$('table:radio:checked').parents("tr").addClass('selected')；此外，如果通过has选择器也可以进一步简化，表示含有选中的单选框的行将被高亮显示：$('tbody>tr:has(:checked)').addClass('selected')；

3．复选框控制表格行高亮

复选框控制表格行与单选框不同，复选框能选择多行变色，并没有限制被选择的个数。当单击某行时，如果已经高亮了，则移除高亮样式并去掉当前行复选框的选中状态；如果还没高亮，则添加高亮样式并将当前行的复选框选中。

判断是否已经高亮，可以使用hasClass()方法来完成。jQuery代码如下：

[插图]

显示效果如图5-25所示。

[插图]

图5-25 复选框控制行高亮

此外，在不改变设计思路的前提下，上面的代码还可以再简化成如下代码：

[插图]

注意：在$(this)[hasSelected?"removeClass":"addClass"]('selected');中：[hasSelected?"removeClass":"addClass"]这是一个三元运算，结果为："removeClass"或者"addClass"。因此$(this)[hasSelected？"removeClass":"addClass"]('selected')；其实代表这2种情况：

[插图]

当用户刚进入页面时，也要处理已经被选中的表格行。jQuery代码如下：

[插图]

5.2.2 表格展开关闭

在上例的人员表格的基础上，增加人员分类。

HTML代码如下：

[插图]

显示效果如图5-26所示。

[插图]

图5-26 人员分类

现在需要实现的是当单击分类行时，可以关闭相应的内容。例如单击“前台设计组”行，则它对应的“张山和李四”两行将收缩。

在这个表格中，给每个<tr>元素设置属性是非常重要的，读者可以在HTML代码中看出一些规则，即给分类行设置了class=”parent”属性，同时也分别给它们设置了id值，而在它们下面的行，只设置了class属性，并且这个class的值是在id值的基础上通过加上“child_”来设置的。基于以上规则，jQuery实现代码如下：

[插图]

运行代码后，当单击表格的父行后，相应的子行会收缩，如图5-27所示。

[插图]

图5-27 单击某行，对齐的子行会收缩

在图5-26 中，人员分类默认是展开的，如果当用户刚进入页面时，默认需要收缩起来，也是很简单的。只要触发click()事件即可。jQuery代码如下：

[插图]

5.2.3 表格内容筛选

在前面的例子中，如果要高亮显示“王五”那一行，可以使用contains选择器来完成，代码如下：

[插图]

利用该选择器再结合jQuery的filter()筛选方法，可以实现表格内容的过滤。

例如使用下面的jQuery代码就可以筛选出含有文本“李”的表格行。

[插图]

显示效果如图5-28所示。

[插图]

图5-28 筛选之后效果

首先在表格上方添加一个文本框，用于根据用户输入的内容来筛选表格内容，然后为文本框绑定keyup事件，代码如下：

[插图]

最后将.filter(“:contains(‘李’)”)代码中的“李”用变量值代替，代码如下：

[插图]

当在文本框中输入“王”时，就会筛选出相应的表格行，显示效果如图5-29所示。

[插图]

图5-29 根据用户输入的文本来筛选

注意表单元素有个特点，就是刷新网页后，其值会保持不变。例如在刚才筛选操作后，刷新网页，则会出现图5-30所示的现象，表单元素的值还存在，但表格内容已经被刷新了。

[插图]

图5-30 刷新后显示的表格数据

要解决这个问题，只需要在 DOM 刚加载完时，为表单元素绑定事件并且立即触发该事件即可。

[插图]

这样，当页面被刷新后，就会立即执行id为“filterName”的keyup事件，因此表格内容就会保持刚才筛选出来的结果。