<JQurey>复选框，选中行换色及鼠标滑过换色

来源：互联网发布：magnet关联的软件编辑：程序博客网时间：2024/06/04 18:12

视频看过以后自己总结做了一下，和原视频的差不多，加入了鼠标滑过换色的效果，具体实现代码如下：

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("tbody > tr:odd").addClass("ou");  /*偶数行变色*/$("tbody > tr:even").addClass("dan");/*奇数行变色*/$("tbody > tr:has(:checked)").addClass("ed");/*默认选中行变色，可以不写*//*选中行变色，并在复选框中打钩*/$("tbody > tr").click(function(){var hased = $(this).hasClass("ed");/*方法一：if(hased){$(this).removeClass("ed").find(":input").attr("checked",!hased);  //这里的!hased相当于false}else{$(this).addClass("ed").find(":input").attr("checked",!hased);  //这里的!hased相当于true}*///方法二：方括号中为三元运算$(this)[hased?"removeClass":"addClass"]("ed").find(":input").attr("checked",!hased);});//鼠标滑过变色效果$("tbody > tr").mouseover(function(){  $(this).addClass("over");});$("tbody > tr").mouseout(function(){  $(this).removeClass("over");});});</script><style type="text/css">table{width:400px;border:0;border-collapse:collapse;  /*边框会合并为一个单一的边框*/margin:auto;}th{font:bold 18px "微软雅黑";text-align:center;padding:4px;border-bottom:1px solid #000;}td{font:normal 18px "微软雅黑";text-align:center;padding:2px;border-bottom:1px solid #000;}.dan{background:#F33;color:#FFF;}.ou{background:#F96;}.ed{background:#639;color:#FFF;}.over{background:#6C3;}</style></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>5月01日</td><td>北京</td><td>小张</td>        </tr>        <tr>        <td><input type="checkbox" name="choice" value="" /></td>            <td>4月03日</td><td>上海</td><td>王洋</td>        </tr>        <tr>        <td><input type="checkbox" name="choice" value="" /></td>            <td>7月16日</td><td>天津</td><td>婉玉</td>        </tr>        <tr>        <td><input type="checkbox" name="choice" value="" /></td>            <td>3月22日</td><td>济南</td><td>张协</td>        </tr>        <tr>        <td><input type="checkbox" name="choice" value="" /></td>            <td>6月08日</td><td>杭州</td><td>刘顺</td>        </tr>        <tr>        <td><input type="checkbox" name="choice" value="" /></td>            <td>1月30日</td><td>哈尔滨</td><td>夏飞</td>        </tr>    </tbody></table></body></html>

鼠标点击变色并勾选效果图：鼠标滑过变色效果图：