本文介绍了一个使用HTML创建表格并结合jQuery实现表格行高亮显示及奇偶行变色效果的例子。通过简单的示例代码，展示了如何利用jQuery简化DOM操作，实现用户友好的界面效果。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>表单应用</title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<style type="text/css">
.odd{
background-color: rgba(232, 230, 230, 0.46);
}
.even{
background-color: rgba(253, 149, 174, 0.64);
}
table{ border:0;border-collapse:collapse;}
tr td{
width:100px;
font:normal 12px/17px Arial;
}
tr th{
text-align:left;
font:bold 12px/17px Arial;
}
.selected{
background-color: rgba(64, 226, 51, 0.86);
}
</style>
</head>
<body>
<table>
<thead>
<tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radios" checked></td><td>张三</td><td>男</td><td>广州</td>
</tr>
<tr>
<td><input type="radio" name="radios"></td><td>李四</td><td>男</td><td>东莞</td>
</tr>
<tr>
<td><input type="radio" name="radios"></td><td>小明</td><td>男</td><td>深圳</td>
</tr>
<tr>
<td><input type="radio" name="radios"></td><td>小花</td><td>女</td><td>茂名</td>
</tr>
<tr>
<td><input type="radio" name="radios"></td><td>小虎</td><td>男</td><td>湛江</td>
</tr>
<tr>
<td><input type="radio" name="radios"></td><td>赵六</td><td>男</td><td>上海</td>
</tr>
<tr>
<td><input type="radio" name="radios"></td><td>王五</td><td>女</td><td>湖南</td>
</tr>
<tr>
<td><input type="radio" name="radios"></td><td>刘思思</td><td>女</td><td>广州</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
//1.表单变色
$("tbody>tr:odd").addClass('odd');
$("tbody>tr:even").addClass('even');
//2.单选框控制表格高亮
$("tbody>tr").click(function() {
$(this).addClass('selected')
.siblings().removeClass('selected')
.end()//end()重新定位到上次操作的元素
.find(':radio').prop('checked', true);
});
//另外，初始化表格的时候，如果有默认被选中，需这样处理
$("tbody>tr:has(:checked)").addClass('selected');
})
</script>
</body>
</html>
转载于:https://www.cnblogs.com/linjing-blog/p/6699777.html
扫一扫
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
