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