HTML+CSS实现穿梭框表格实例
先⼤概说下我要弄的功能吧，其实也很简单就是根据条件搜索，然后弄⼀个表格展⽰，点击选中后向右移动，就是选中，然后就提交，⼤概就这样的功能，看看我画的原型图吧。
⼤概意思就这样，其实很简单，但是问题就在于穿梭框有点难实现，主要是可能对于后端开发来说就是⾃⼰不太懂，⽆法实现，然后我百度了⼀波例⼦，⾃⼰⽤于改造了⼀下就可以⽤了，我们来看看写的啥样⼦吧
感觉就这样吧，⽅正⾃⼰也不是专业的，也没有设计就只能做成这样了，好了直接贴代码吧。
<html>
<html>
<head>
<meta name="decorator" content="list"/>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">    <style>
.whdth{
width: 17%;
/*    padding-right: 60px;
padding-left: 40px; */
}
.
bodys{
display: flex;
justify-content:space-around;
height: 7vh;
padding-top: 10px;
flex-wrap: nowrap;
}
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555 !important;;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px !important;;
}
.flex{
padding-top: 10px;
display: flex;
justify-content: space-between;
padding-left: 6px;
padding-right: 6px;
height: 65vh;
}
.flex-left{
width: 44vw;
border: 1px solid #000000;
}
.flex-regh{
width: 44vw;
border: 1px solid #000000;
}
/* .body{
padding-left: 20px;
padding-right: 20px;
}*/
li{
list-style: none;
}
#shuttle_box{width:800px;zoom: 1;margin: 100px auto;}
#shuttle_box:after{
content: ".";
clear: both;
display: block;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.shuttle_box_near{
background-color:#ffffff;
overflow-y: scroll;
overflow-x:hidden;
height: 100%;
}
.shuttle_box_li_act{
color:#ffffff !important;
background-color: #1890ff !important;
border-bottom: 1px solid #ffffff;
transition: all .01s;}
.shuttle_box_near::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px;    /*⾼宽分别对应横竖滚动条的尺⼨*/
height: 1px;
}
.
shuttle_box_near::-webkit-scrollbar-thumb {/*滚动条⾥⾯⼩⽅块*/            border-radius: 20px;
background-color: rgba(0,0,0,0.5);
}
.shuttle_box_near::-webkit-scrollbar-track {/*滚动条⾥⾯轨道*/
background-color: rgba(0,0,0,0.2);
border-radius: 20px;
}
.shuttle_box_near tr{
padding:8px;
/* border-bottom: 1px solid #ffffff; */
background-color: #f4f4f4;
html横向滚动条样式
cursor: pointer;
transition: all .5s;
}
.shuttle_box_li_act:hover{
opacity: 0.7;
transition: all .01s;}
#shuttle_box_mid{
width:80px;
text-align: center;
}
#shuttle_box_mid button{
width: 50px;
height:30px;
display: block;
margin:20px auto;
line-height: 30px;
color:white;
cursor: pointer;
background-color: #1890ff;
border-radius: 5px;
transition: all .5s;
border:none;
}
#shuttle_box_mid button:hover{opacity: 0.7;transition: all .5s;}
#shuttle_box_toRight{margin-top:225px !important;}
td,th{
height: 40px;
text-align: center;
}
td {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-overflow:ellipsis;
max-width: 30px;
}
.bottom{
height: 20vh;
display: flex;
justify-content: space-around;
padding-top: 10px;
padding-left: 6px;
}
.title{
padding-left: 20px;
padding-right: 6px;
padding-top: 16px;
}
.rigths{
width: 48vw;
border: 1px solid #ccc;
border-radius: 4px;
display: flex;
}
.selects{
padding-top: 8px;
}
.bottomwh{
width: 48vw;
}
.annBottom{
display: flex;
justify-content: center;
padding-top: 8px;
padding-bottom: 8px;
}
.
bypes{
width: 100px;
}
.trhide{
display: none;
pointer-events: none;
}
/*    #hide{
pointer-events: none;
} */
</style>
</head>
<body>
<div class="body">
<div class="bodys">
<div class="input-group whdth">
<span class="input-group-addon">批次号</span>
<input type="text" name="batchNo" id="batchNo"  value="" class="form-control whdth">        </div>
<div class="input-group whdth">
<span class="input-group-addon">订单号</span>
<input type="text" id="orderNo" name="orderNo" value ="" class="form-control whdth">        </div>
<div class="input-group whdth">
<span class="input-group-addon">车牌号</span>
<input type="text" name="carNo" value="" id="carNo" class="form-control whdth">
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。