Jquery案例之复选框与各行换色


本案例要实现的功能:选择复选框时各行换色。

本文后面提供该案例演示的完整实例,本案例的演练结果如图所示:

本案例将用到以下知识点


addClass() 方法向被选元素添加一个或多个类。

$(selector).addClass(class)

removeClass() 方法从被选元素移除一个或多个类。

$(selector).removeClass(class)


hasClass() 方法检查被选元素是否包含指定的 class。

$(selector).hasClass(class)


find() 再次定位或查找指定元素(含)

.find(class)

attr() 方法设置或返回被选元素的属性值。

$(selector).attr(attribute)

$(selector).attr(attribute,value)

$(selector).attr(attribute,function(index,oldvalue))


补充--冒号: 在JQuery用法

jquery中的'.'号表示class

jquery中的'#'表示id

:在css中代表伪选择符,但是在jQuery,这里就是固定用法,如:


:input 

:text 

:password 

:radio 

:checkbox

:submit 

:image 

:reset 

:button

:file 

:hidden


Jquery案例之复选框与各行换色完整实例

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
  <title>JavaScript Book--代码6-20</title>
  <style type="text/css"> 
table {border:0;border-collapse:collapse;}
td {font:normal 12px/17px Arial;padding:2px;width:100px;}
th {font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.dan {background:#FC0}
.ou {background:#FFF}
.ed {background:#669;color:#fff;}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//设置偶数行和奇数行
$("tbody>tr:odd").addClass("ou");
$("tbody>tr:even").addClass("dan");
//搜索被选中has(:checked)
$("tbody>tr:has(:checked)").addClass("ed");
//遍历指定触发函数
$('tbody>tr').click(function(){
     var hased=$(this).hasClass('ed');
     
     if(hased){
     $(this).removeClass('ed').find(':checkbox').attr('checked',false);
     }else{
     $(this).addClass("ed").find(":input").attr("checked",true);}  
     });
})    
     </script>
     </head>
     <body>
           <table>
            <thead>
               <tr><th></th><th>标题</th><th>时间</th><th>地点</th></tr>
                </thead>
                   <tbody>
                      <tr>
                       <td><input type="checkbox" name="choice" value="" /></td>
                                <td>PHP100-1</td>
                                <td>2011</td>
                                <td>上海</td>
                        </tr>
                            <tr>
                                <td><input type="checkbox" name="choice" value=""  checked /></td>
                                <td>PHP100-2</td>
                                <td>2012</td>
                                <td>北京</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="choice" value=""  /></td>
                                <td>PHP100-3</td>
                                <td>2013</td>
                                <td>杭州</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="choice" value=""   /></td>
                                <td>PHP100-2</td>
                                <td>2012</td>
                                <td>北京</td>
                            </tr>
                   </tbody>
                 </table>
  </body>
  </html>