JQ实现效果：奇偶行颜色不同，单项选择和多项选择
2017-07-25 18:20
555 查看
1、表格变色
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');2、单项选择列表radio
$('tbody>tr').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});对表单中的行进行操作：增加类，去除原来的类，并对所选择的项的属性设置为选中。
整体代码：
<!DOCTYPE html>
<html>
<head>
<title>char 5.2.1</title>
<meta charset="utf-8" />
<style type="text/css">
.even{
background-color: #fff38f;
}
.odd{
background-color: #ffffee;
}
.selected{
background-color: #feeeee;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
//$('tr:contains("王五")').addClass('selected');
$('tbody>tr').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});
//获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')
$('table :radio:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr><td><input type="radio" name="choice" value=""/></td>
<td>王五</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="radio" name="choice" value="" checked="checked" /></td>
<td>赵六</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="radio" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>3、多项选择Checkbox
多项选择可以选择多个高亮，主要在于高亮的判断
<!DOCTYPE html>
<html>
<head>
<title>char 5.2.1</title>
<meta charset="utf-8" />
<style type="text/css">
.even{
background-color: #fff38f;
}
.odd{
background-color: #ffffee;
}
.selected{
background-color: #feeeee;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
//对表单进行操作
$('tbody>tr').click(function() {
//判断是否是高亮了，使用hasclass（）
if($(this).hasClass('selected')){
$(this).removeClass('selected')
.find(':checkbox').attr('checked',false);
}else{
$(this).addClass('selected')
.find(':checkbox').attr('checked', true);
}
});
//获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')
$('table :checkbox:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>王五</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>赵六</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');2、单项选择列表radio
$('tbody>tr').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});对表单中的行进行操作：增加类，去除原来的类，并对所选择的项的属性设置为选中。
整体代码：
<!DOCTYPE html>
<html>
<head>
<title>char 5.2.1</title>
<meta charset="utf-8" />
<style type="text/css">
.even{
background-color: #fff38f;
}
.odd{
background-color: #ffffee;
}
.selected{
background-color: #feeeee;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
//$('tr:contains("王五")').addClass('selected');
$('tbody>tr').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});
//获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')
$('table :radio:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr><td><input type="radio" name="choice" value=""/></td>
<td>王五</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="radio" name="choice" value="" checked="checked" /></td>
<td>赵六</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="radio" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>3、多项选择Checkbox
多项选择可以选择多个高亮，主要在于高亮的判断
<!DOCTYPE html>
<html>
<head>
<title>char 5.2.1</title>
<meta charset="utf-8" />
<style type="text/css">
.even{
background-color: #fff38f;
}
.odd{
background-color: #ffffee;
}
.selected{
background-color: #feeeee;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
//对表单进行操作
$('tbody>tr').click(function() {
//判断是否是高亮了，使用hasclass（）
if($(this).hasClass('selected')){
$(this).removeClass('selected')
.find(':checkbox').attr('checked',false);
}else{
$(this).addClass('selected')
.find(':checkbox').attr('checked', true);
}
});
//获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')
$('table :checkbox:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>王五</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>赵六</td>
<td>男</td>
<td>山东</td>
</tr>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 纯CSS table 表格奇偶行不同颜色实现
- CSS在不同浏览器下实现颜色渐变效果
- javascript实现不同颜色Tab标签切换效果
- 服务器端 弹出确认框，选择确定，取消 实现不同效果
- Android实现单项、多项选择操作
- javascript实现的仿51job地址多项选择方式效果
- Android里面主菜单里面设置菜单列表，单项选择，多项选择的实现
- 纯CSS实现 table 表格奇偶行不同颜色
- android中一个TextView实现其中内容大小颜色不同的效果
- javascript实现的仿51job地址多项选择方式效果
- jquery 实现表格奇数偶数行颜色不一样 ，可以实现不同的效果，区分奇数偶数行
- CAGradientLayer与CAShapeLayer实现不同颜色画圆动画（Spark相机的录制的效果）
- 安卓学习笔记---Android-PickerView实现 3D滚轮效果（时间选择器、省市区三级联动，单项选择效果）
- Combobox实现多项选择 Silverlight下“Combobox”怎样实现多项选择？
- flex实现选牌效果，即选择一张扑克牌
- iOS使用NSMutableAttributedString 实现富文本（不同颜色字体、下划线等）
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
- 自己对“用不同颜色显示表格奇偶行的例子”扩充了用不同颜色显示鼠标单击的行
- Android：实现一种浮动选择菜单的效果
- Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应