Jquery 用Table模拟行列选中
公司要求把CS项目上的一个功能搬运到BS上,我觉得以后的开发肯定要脱离控件 ,所以自己用jquery模拟了一个 ,以下是代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//多选
// $(".tbChoose").click(function(){
//
// var color1=$(this).css("background-Color");
//
//
//
// //选中
// if(color1=="transparent"){
// $(this).css("background-Color","red");
// //改变选中的文字
// $(this).find("td:first").text("是");
//
// }
// else{
// $(this).css("background-Color","transparent");
// $(this).find("td:first").text("否");
// }
//
//
//
//
// })
//单选
$(".tbChoose").click(function(){
var color1=$(this).css("background-Color");
var count=$(".tbChoose").find("td:first").length;
//alert(count);
//选中
if(color1=="transparent"){
//清空其他类型
$(".tbChoose").css("background-Color","transparent");
$(this).css("background-Color","red");
//文本重置
$(".tbChoose").find("td:first").text("否");
//改变选中的文字
$(this).find("td:first").text("是");
}
else{
//改变选中的文字
$(".tbChoose").css("background-Color","transparent");
$(this).css("background-Color","transparent");
$(this).find("td:first").text("否");
}
});
})
</script>
</head>
<body>
<table border="1" width="50%">
<tr class="tbChoose" >
<td>
否
</td>
<td>
111111111111111111
</td>
</tr>
<tr class="tbChoose">
<td>
否
</td>
<td>
2222222222222222222
</td>
</tr>
<tr class="tbChoose">
<td>
否
</td>
<td>
3333333333333333333
</td>
</tr>
</table>
</body>
</html>
做完以后 实现的效果是这样的 单选效果是 每次只能选中 一行 被选中的 那行的文本会变成是 ,其他的为否 如图
多选效果是,可以选中多行 被选中的 那行的文本会变成是 ,其他的为否 如图
取消选中 只需在已选中的行上再次点击,即可取消选中
样式什么的 不是我的擅长