选中checkbox框 实现表格的隔行变色（二）
来源：互联网 发布：php扩展开发教程 2015 编辑：程序博客网 时间：2024/05/10 22:33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>.once{background-color:#0FC; }.after{background-color:#F00;} .selected1{background-color:#33C; }</style><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" type="text/javascript" src="../20120319/include/jquery.js"></script><script language="javascript" type="text/javascript" >//使用jquery绑定事件$(document).ready(function (){ //设置隔行变色 $("tr:even").addClass("once"); $("tr:odd").addClass("after"); //根据name获取所有的check，然后进行循环 $("input[name='box']").each(function (){ //给check添加事件 $(this).click(function (){ //判断check是否被选中 if(this.checked==true){ $(this).parent().parent().addClass("selected1"); }else{ $(this).parent().parent().removeClass("selected1"); } }); }); }); </script></head><body><table width="600" border="1"> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" name="box" /></td> <td> </td> <td> </td> <td> </td> </tr></table></body></html>
