<!DOCTYPE html>
<html>
<head>
<title>text</title>
<script src="./jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$("tr:not(:first):odd").addClass("odd");
$("tr:not(:first):even").addClass("even");
$("#table_list tr").click(function(){
$(this).addClass("select").siblings().removeClass("select");
$(this).find("input").prop("checked",true);
});
});
</script>
<style>
.odd{
background:#FFFFEE
}
.even{
background:#FFF38F
}
.select
{
background:#FF6500
}
table
{
width:50%;
height:20%;
}
th
{
font-weight:bold;
}
td
{
text-align:center;
}
</style>
</head>
<body>
<div id="table_list">
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
<tr>
<td><input id="radiobox1" name="radiobox" type="radio" value="1" ></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input id="radiobox2" name="radiobox" type="radio" value="2" ></td>
<td>李四</td>
<td>女</td>
<td>四川绵阳</td>
</tr>
<tr>
<td><input id="radiobox3" name="radiobox" type="radio" value="3" ></td>
<td>王五</td>
<td>男</td>
<td>四川南充</td>
</tr>
<tr>
<td><input id="radiobox4" name="radiobox" type="radio" value="4" ></td>
<td>赵六</td>
<td>男</td>
<td>四川自贡</td>
</tr>
<tr>
<td><input id="radiobox4" name="radiobox" type="radio" value="4" ></td>
<td>陈勇</td>
<td>男</td>
<td>四川德阳</td>
</tr>
<tr>
<td><input id="radiobox4" name="radiobox" type="radio" value="4" ></td>
<td>罗梅</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
