<!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>