Html:
<html ><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/demo_18.css"/><script src="js/jquery-3.4.1.min.js"></script><script src="js/jquery_demo_18.js"></script></head><body> <table> <thead> <tr> <th></th> <th>周表</th> <th>时间</th> <th>地点</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="radioa" value="" /></td> <td>星期一</td> <td>2022</td> <td>暂无</td> </tr> <tr> <td><input type="checkbox" name="radioa" value="" /></td> <td>星期二</td> <td>2022</td> <td>暂无</td> </tr> <tr> <td><input type="checkbox" name="radioa" value="" checked="checked" /></td> <td>星期三</td> <td>2022</td> <td>暂无</td> </tr> <tr> <td><input type="checkbox" name="radioa" value="" /></td> <td>星期四</td> <td>2022</td> <td>暂无</td> </tr> <tr> <td><input type="checkbox" name="radioa" value="" /></td> <td>星期五</td> <td>2022</td> <td>暂无</td> </tr> <tr> <td><input type="checkbox" name="radioa" value="" /></td> <td>星期六</td> <td>2022</td> <td>暂无</td> </tr> <tr> <td><input type="checkbox" name="radioa" value="" /></td> <td>星期日</td> <td>2022</td> <td>暂无</td> </tr> </tbody> </table></body></html>Css:
* { padding:0; margin:0;}body { font-size:12px; padding:100px;}table { border-collapse:collapse;}th { border-bottom:1px solid #000; padding:10px 20px;}td { padding:10px 20px;}tr { cursor:pointer;}.odd { background:#eee;}.even { background:#ccc;}.selected { background:orange;}Js:
$(document).ready(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even") $("tr:contains('星期三')").addClass("selected"); $("tbody>tr").click(function(){ if($(this).hasClass("selected")){ $(this).removeClass("selected") .find(":checkbox").attr("checked",false); } else{ $(this).addClass("selected") .find(":checkbox").attr("checked",true); } });});
