表格变色例子

         今天做了《锋利的Jquery》的表格变色的例子。作为一个这一行业的green-hander，我决定一步一个脚印从简单的做起，把基础打扎实，看书要和写代码结合起来。我决定把书中的每个例子看一遍再做一遍再总结一下，加深理解和印象。

       表格变色一共做了2个案例，一个是点击表格的单选按钮，并让选中的高亮，其余的去除高亮；另外一个是表格多选案例，选中的都给予高亮显示。不限制个数。

        先说说单选案例，效果如图：

        

        要实现的效果是1：隔行变色；2：点击表格的某一行，让其高亮，且让它选中，其余的去除高亮

        再来说说代码的实现：

        1：隔行变色

             分别给表格的奇数行和偶数行添加对应的样式。这里要注意的是$("tbody>tr:odd")和$("tbody>tr:even")选择器中索引是从0开始的，因此第1行是偶数。

         2：点击表格的某一行，让其高亮，且让它选中，其余的去除高亮

             代码如下：             

$('tbody>tr').click(function(event) {
     	$(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked', true);
     });

               上面的代码中使用了end()方法，当前对象是$(this)，当执行siblings().removeClass('selected')操作时，对象已经变为$(this).siblings()；因此后面的操作都是针对这个对象的，如果此时想回到$(this)的对象，就可以使用end()方法         3：初始化表格时，如果默认已有单选框被选中，那么也需要处理，代码如下：            

$('table :radio:checked').parent().parent().addClass('selected');

注意：

$('table :radio:checked').parent().parent().addClass('selected');

是通过parent()方法逐步向父节点获取相应的元素的，也可以使用parents()方法直接获取；

此外，如果通过has选择器也可以进一步简化，表示含有选中的单选框的<tr>行将被高亮显示；

$('table :radio:checked').parents("tr").addClass('selected'); 

      再来说说多选案例，效果如图：

      

     隔行变色和刚才一样，不多说。这里说这个例子的另外个主要效果，选中的都给予高亮显示。不限制个数

     这里设了个变量和三元运算符来判断当前是否选中，代码如下：

     

$('tbody>tr').click(function(event) {
       var hasSelected=$(this).hasClass('selected');
      $(this)[hasSelected?"removeClass":"addClass"]('selected')
)}

这里的

 $(this)[hasSelected?"removeClass":"addClass"]('selected')

其实代表这2种情况：

$(this)["removeClass"]('selected');

或者$(this)["addClass"]('selected');

他们等价于$(this).removeClass('selected');

或者$(this).addClass('selected')