一款智能管理系统的楼层房屋位置选择代码,可以点击表格的任意单元格进行选择,重复点击同一个单元格则为取消选择,支持单选、多选、整行选择、多行选择等,自由度还是比较高的,选中的单元格则改变背景色显示,喜欢的童鞋请收下吧。
页面的head部分,需引入bootstrap-3.3.4样式库、jQuery库和bootstrap-3.3.4.js,并简单设置页面元素的样式,代码如下:
<link type="text/css" rel="stylesheet" href="css/bootstrap-3.3.4.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.3.4.js"></script>
<style type="text/css">
.bgs {
background: #00B3EE;
color: #fff;
}
</style>
页面的body部分,主要时一个table,结构并不复杂,代码如下:
<table class="floor table table-striped table-hover" id="aaa">
<tbody>
<tr>
<td rowspan="3" onclick="choiceTitle(this)">五栋-1单元-选择栋</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td rowspan="3" onclick="choiceTitle(this)">五栋-1单元-选择栋</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td rowspan="3" onclick="choiceTitle(this)">五栋-1单元-选择栋</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
<tr>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">11楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">12楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">13楼</td>
<td class="bgTd"onclick="choiceFloor(this)" unit="1">14楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">15楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">16楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">17楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">18楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">19楼</td>
<td class="bgTd" onclick="choiceFloor(this)" unit="1">20楼</td>
<td onclick="transverse(this)" type="0">选择行</td>
</tr>
</tboty>
</table>
页面的底部,设置好表格的选择事件控制的响应,代码如下:
<script type="text/javascript">
//================ 控制点击单元全选的时候 ====================
function choiceTitle(obj){
//声明参数b
var b = "";
//获取 rowspan 的值
var foor = $(obj).attr("rowspan");
//给当前的所有的参数 +1
var index = $(obj).parent().index()+1;
//循环最大不超过 rowspan 的值
for(var i=0;i<foor;i++){
//递加 +1 循环查找所有的td
$(obj).parent().parent().find("tr:nth-child("+(index+i)+")").find(".bgTd").each(function(){
//if判断
if(!$(this).hasClass("bgs")){ //判断全选的时候,b==true
b = false; //取消全选
return false; //跳出当前循环
}else{ //否则
b = true; //实现全选
}
});
//判断b为真还是为假
if(b){
}else{
//跳出 for 循环
break;
}
}
//循环查找所有的td
for(var i=0;i<foor;i++){
$(obj).parent().parent().find("tr:nth-child("+(index+i)+")").find(".bgTd").each(function(){
if(b){ //判断全选的时候,b==true
$(this).removeClass("bgs"); //取消全选
}else{ //否则
$(this).addClass("bgs"); //实现全选
}
})
}
}
//================ 控制点击单个的时候 ====================
function choiceFloor(obj){
$(obj).toggleClass("bgs"); //控制单个的样式添加和删除
};
//================ 控制点击横排全选的时候 ====================
function transverse(obj) {
//声明参数
var b = "";
//查找当前父级标签下的所有的 bgtd
$(obj).parents("tr").find(".bgTd").each(function(){
if(!$(this).hasClass("bgs")){ //判断全选的时候,b==true
b = false; //取消全选
return false; //跳出当前循环
}else{ //否则
b = true; //实现全选
}
});
//查找父级标签下的所有的 bgTd
$(obj).parents("tr").find(".bgTd").each(function(){
if(b){ //判断全选的时候,b==true
$(this).removeClass("bgs"); //取消全选
}else{ //否则
$(this).addClass("bgs"); //实现全选
}
});
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791