<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; } td, th { border: 1px solid black; text-align: center; width: 80px; /* 单元格设置边框 */ } #checkTable{ margin-left: 20px; margin-right: 20px; border: 1px solid black; border-collapse: collapse; } tr:nth-of-type(2n){ background-color: #FFF38F; } tr:nth-of-type(2n+3){ background-color: #FFFFEE; } .active{ background-color: #FF6500 !important; } </style> <body> <table id="checkTable"> <tr> <th></th> <th>姓名</th> <th>性别</th> <th class="place">暂住地</th> </tr> <tr> <td><input type="radio" name="user"></td> <td>张三</td> <td>男</td> <td class="place">四川成都</td> </tr> <tr> <td><input type="radio" name="user"></td> <td>李四</td> <td>女</td> <td class="place">四川绵阳</td> </tr> <tr> <td><input type="radio" name="user"></td> <td>王五</td> <td>男</td> <td class="place"> 四川南充</td> </tr> <tr> <td><input type="radio" name="user"></td> <td>赵六</td> <td>女</td> <td class="place">四川自贡</td> </tr> <tr> <td><input type="radio" name="user"></td> <td>谭二</td> <td>男</td> <td class="place">四川德阳</td> </tr> <tr> <td><input type="radio" name="user"></td> <td>张梅</td> <td>女</td> <td class="place">四川宜宾</td> </tr> </table> <script> let lastNode; $(document).ready(function(e){ $("input").click((e)=>{ if(lastNode!=null){ lastNode.className='' } if(e.target.checked){ e.target.parentNode.parentNode.className='active' }else{ e.target.parentNode.parentNode.className='' } lastNode=e.target.parentNode.parentNode }) }) </script> </body> </html>