一个查询内容功能，动态添加内容，删除内容并提交的demo
2014-11-26 14:40
411 查看
css部分:
*{ margin: 0;
padding: 0;
font-size: 16px;
font-family:"Microsoft YaHei";
}
/*搜索框上面的div的样式*/
.thead{
margin-top: 0px;
width: 100%;
height: 50px;
background-color: #e3e3e3;
text-align: center;
}
/*底部内容的设置*/
.efooter{
bottom: 0px;
width: 100%;
height: 50px;
background-color: #e3e3e3;
position: absolute;
}
.efooter table{
width: 100%;
height: 100%;
}
.efooter table tr{
width: 100%;
}
.efooter table tr td {
width: 50%;
text-align: center;
}
.btue{
background-color:#00CCFF;
color: #fff;
}
.tcontent{
margin-top: 0px;
}
/*内容框的内容的样式*/
.panell{
margin-top: 10%;
width: 100%;
height: 200px;
margin-top: 0px;
}
.panell ul{
width: 100%;
}
.panell ul .uli{
width: 33.0%;
float: left;
height: 50px;
cursor: pointer;
}
.panell ul .uli img{
margin-left: 20%
}
.panell .phead{
margin-top: 10px;
}
.panell .phead ul{
width: 100%;
height: 20px;
font-size: 18px;
}
.panell .phead ul li{
float: left;
width: 33%;
}
.line_index{
background-color:#00CCFF;
height:1px;
width:100%;
}
/* 搜索框的设置*/
.textcontent{
border-style: none;
width:80%;
height: 30px;
margin-top: 10px;
font-size: 16px;
text-align: center;
/* border-radius:20px 15px 20px 25px;*/
border-radius: 2px;
}
/*搜索框的按钮*/
#btn11{
height: 40px;
width: 20px;
font-size: 18px;
background-color: #00CCFF;
color: #fff;
}
.searchcontent{
background-color: #00CCFF;
font-size: 18px;
}
/*选取框的内容选取*/
.ohead{
height: 30px;
background-color: #999;
text-align: center;
padding-left: 10%;
}
/*选取框的内容*/
.nconent{
width: 20%;
height: 25px;
background-color: #fff;
color: #000;
margin-left: 10px;
float: left;
border-radius: 5px;
text-align: center;
margin-top: 3px;
cursor: pointer;
}
.nconent img{
position: absolute;
display: none;
}
/*返回页面的信息的确定按钮*/
#conbtnll{
border-radius: 5px;
width: 45%;
height: 25px;
text-align: center;
background-color:#e3e3e3;
color: #fff;
margin-top: 5px;
margin-left: 30%;
}
/*确定提交*/
.comitbtn{
margin-top: 0px;
height: 29px;
text-align: center;
}
/*全部科室的样式*/
.alldept{
display: none;
}
/*底部样式*/
.efooter {
cursor: pointer;
}
/*第一部分*/
.onepart{
display: block;
}
html部分:
<body>
<div class="onepart">
<div class="ohead">
</div>
<div class="comitbtn">
<a href="dept.html" id='enda' >
<div id="conbtnll">
确定
</div>
</a>
</div>
</div>
<div class="thead">
<input type="text" placeholder="请输入你要搜索的科室名" class="textcontent">
</div>
<div class="tcontent recommendept" >
<div class="panell">
<br>
<ul class="mycontent">
<li class="uli"><img src="1.png">儿科</li>
<li class="uli"><img src="1.png">营养科</li>
<li class="uli"><img src="1.png">外科</li>
<li class="uli"><img src="1.png">内科</li>
<li class="uli"><img src="1.png">信息科</li>
</ul>
</div>
</div>
<div class="tcontent alldept" >
<div class="panell">
<br>
<ul class="mycontent">
<li class="uli"><img src="1.png"><span>儿科</span></li>
<li class="uli"><img src="1.png"><span>营养科</span></li>
<li class="uli"><img src="1.png"><span>外科</span></li>
<li class="uli"><img src="1.png"><span>内科</span></li>
<li class="uli"><img src="1.png"><span>信息科</span></li>
<li class="uli"><img src="1.png"><span>骨科</span></li>
<li class="uli"><img src="1.png"><span>放射科</span></li>
<li class="uli"><img src="1.png"><span>理疗科</span></li>
<li class="uli"><img src="1.png"><span>心脏内科</span></li>
<li class="uli"><img src="1.png">麻醉科<span></span></li>
</ul>
</div>
</div>
<div class="efooter">
<table>
<tr>
<td class="btue" id='tdone'>推荐科室</td>
<td id='tdtwo'>全部科室</td>
</tr>
</table>
</div>
</body>
js部分:
$(function(){
//图片进行切换
$(".uli").click(function(){
//内容版面的各个对象进行获取坐标值
var $count=$(".uli").index(this);
var $mobj=$(".mycontent li img");
var $mobli=$(".mycontent li");
var $mohead=$('.ohead');
var $imgchange=$($mobj[$count]);
//显示选取版面信息
var $aready=$('.ohead .nconent');
//算高度
var $areadylength=0;
if ($imgchange.attr("src")==="1.png") {
//说明勾选了代表为选取了此科室
$imgchange.attr("src","2.png");
//进行对选取内容版面的高度设置$mohead.height()是一个整数
//求出的是可以放多少个内容值的块
$areadylength=Math.ceil(($aready.length+1)/4);
//动态进行添加一个div
$addept="<div class='nconent' onClick='showimage(this)'>"+$($mobli[$count]).text()+"<img src='x.png' onClick='deletdiv(this)'></div>"
//动态的添加
$mohead.append($addept);
//alert($aready.length);
}else{
$imgchange.attr("src","1.png");
//alert($($aready[0]).text())
//当切换科室完之后，说明不选此科室
for(var i=0;i<$aready.length;i++){
//jQuery中append对应的是detach而不是remove
//进行匹配信息的对应是否对应
if($($mobli[$count]).text()===($($aready[i]).text())){
//进行删除对应取消的对象
$($aready[i]).detach();
}
}
$areadylength=Math.ceil(($aready.length-1)/4);
if ($areadylength<=0) {$areadylength=1};
}
setButtonColor();
$mohead.css("height",($areadylength*30)+"px");
});
//进行切换成全部科室
$('#tdone').click(function(){
$("#tdtwo").removeClass("btue");
$('#tdone').addClass("btue");
$('.alldept').hide();
$('.recommendept').show();
});
//进行切换成全部科室
$('#tdtwo').click(function(){
$("#tdone").removeClass("btue");
$('#tdtwo').addClass("btue");
$('.recommendept').hide();
$('.alldept ').show();
});
//下面的是进行keyup的操作
$('.textcontent').keyup(function(){
//键入一个文字就进行查询处理
$keytext=new RegExp($('.textcontent').val());
$("#tdone").removeClass("btue");
$("#tdtwo").addClass("btue");
//进行切换成全部科室
$('.recommendept').hide();
$('.alldept ').show();
//进行遍历全部科室的科室名
var $allmobli=$('.alldept .mycontent li');
for(var lz=0;lz<$allmobli.length;lz++){
var $deptcontent=$($allmobli[lz]).text();
//进行文字的匹配
if($keytext.test($deptcontent)){
$($allmobli[lz]).show();
}else{
$($allmobli[lz]).hide();
}
}
});
//进行确定的处理
$('#conbtnll').click(function(){
//如果为空的话就进行以下的操作
//显示选取版面信息
var $aready=$('.ohead .nconent');
var $array=[];
var $endcontent=null;
if ($aready.length) {
for(var i=0;i<$aready.length;i++){
$array[i]=$($aready[i]).text();
}
$endcontent=$array.join(" ");
$('#enda').attr("href","dept.html?name="+$endcontent);
alert("你选择的科室为:"+$endcontent);
$('#enda').click();
}else{
alert("请选择你需要的科室");
return false;
}
});
});
//点击图片进行图片的显示
function showimage(mdata){
//进行事件的点击，触发为图片进行
$(mdata).find("img").show();
}
//当点击添加的科室进行把这个div进行去掉
function deletdiv(mdata){
//显示选取版面信息
var $parentdiv=$(mdata).parent();
//下面是进行对下面的图标进行打钩变成圆圈
//获取取消的图标的信息的图标
var $contenttest=$parentdiv.text();
var $mobj=$(".mycontent li img");
var $mobli=$(".mycontent li");
for(var j=0;j<$mobli.length;j++){
if ($($mobli[j]).text()===$contenttest) {
//值相等的时候就进行不打勾处理
$($mobj[j]).attr('src','1.png');
};
}
//去掉这个div
$parentdiv.detach();
//显示选取版面信息样式进行高度的调整
var $aready=$('.ohead .nconent');
var $mohead=$('.ohead');
$areadylength=Math.ceil(($aready.length-1)/4);
if ($areadylength<=0) {$areadylength=1};
$mohead.css("height",($areadylength*30)+"px");
setButtonColor();
}
function setButtonColor(){
if($('.ohead .nconent').length==0){
$('#conbtnll').css("background-color","#e3e3e3");
}else{
$('#conbtnll').css("background-color","#00CCFF");
}
}
*{ margin: 0;
padding: 0;
font-size: 16px;
font-family:"Microsoft YaHei";
}
/*搜索框上面的div的样式*/
.thead{
margin-top: 0px;
width: 100%;
height: 50px;
background-color: #e3e3e3;
text-align: center;
}
/*底部内容的设置*/
.efooter{
bottom: 0px;
width: 100%;
height: 50px;
background-color: #e3e3e3;
position: absolute;
}
.efooter table{
width: 100%;
height: 100%;
}
.efooter table tr{
width: 100%;
}
.efooter table tr td {
width: 50%;
text-align: center;
}
.btue{
background-color:#00CCFF;
color: #fff;
}
.tcontent{
margin-top: 0px;
}
/*内容框的内容的样式*/
.panell{
margin-top: 10%;
width: 100%;
height: 200px;
margin-top: 0px;
}
.panell ul{
width: 100%;
}
.panell ul .uli{
width: 33.0%;
float: left;
height: 50px;
cursor: pointer;
}
.panell ul .uli img{
margin-left: 20%
}
.panell .phead{
margin-top: 10px;
}
.panell .phead ul{
width: 100%;
height: 20px;
font-size: 18px;
}
.panell .phead ul li{
float: left;
width: 33%;
}
.line_index{
background-color:#00CCFF;
height:1px;
width:100%;
}
/* 搜索框的设置*/
.textcontent{
border-style: none;
width:80%;
height: 30px;
margin-top: 10px;
font-size: 16px;
text-align: center;
/* border-radius:20px 15px 20px 25px;*/
border-radius: 2px;
}
/*搜索框的按钮*/
#btn11{
height: 40px;
width: 20px;
font-size: 18px;
background-color: #00CCFF;
color: #fff;
}
.searchcontent{
background-color: #00CCFF;
font-size: 18px;
}
/*选取框的内容选取*/
.ohead{
height: 30px;
background-color: #999;
text-align: center;
padding-left: 10%;
}
/*选取框的内容*/
.nconent{
width: 20%;
height: 25px;
background-color: #fff;
color: #000;
margin-left: 10px;
float: left;
border-radius: 5px;
text-align: center;
margin-top: 3px;
cursor: pointer;
}
.nconent img{
position: absolute;
display: none;
}
/*返回页面的信息的确定按钮*/
#conbtnll{
border-radius: 5px;
width: 45%;
height: 25px;
text-align: center;
background-color:#e3e3e3;
color: #fff;
margin-top: 5px;
margin-left: 30%;
}
/*确定提交*/
.comitbtn{
margin-top: 0px;
height: 29px;
text-align: center;
}
/*全部科室的样式*/
.alldept{
display: none;
}
/*底部样式*/
.efooter {
cursor: pointer;
}
/*第一部分*/
.onepart{
display: block;
}
html部分:
<body>
<div class="onepart">
<div class="ohead">
</div>
<div class="comitbtn">
<a href="dept.html" id='enda' >
<div id="conbtnll">
确定
</div>
</a>
</div>
</div>
<div class="thead">
<input type="text" placeholder="请输入你要搜索的科室名" class="textcontent">
</div>
<div class="tcontent recommendept" >
<div class="panell">
<br>
<ul class="mycontent">
<li class="uli"><img src="1.png">儿科</li>
<li class="uli"><img src="1.png">营养科</li>
<li class="uli"><img src="1.png">外科</li>
<li class="uli"><img src="1.png">内科</li>
<li class="uli"><img src="1.png">信息科</li>
</ul>
</div>
</div>
<div class="tcontent alldept" >
<div class="panell">
<br>
<ul class="mycontent">
<li class="uli"><img src="1.png"><span>儿科</span></li>
<li class="uli"><img src="1.png"><span>营养科</span></li>
<li class="uli"><img src="1.png"><span>外科</span></li>
<li class="uli"><img src="1.png"><span>内科</span></li>
<li class="uli"><img src="1.png"><span>信息科</span></li>
<li class="uli"><img src="1.png"><span>骨科</span></li>
<li class="uli"><img src="1.png"><span>放射科</span></li>
<li class="uli"><img src="1.png"><span>理疗科</span></li>
<li class="uli"><img src="1.png"><span>心脏内科</span></li>
<li class="uli"><img src="1.png">麻醉科<span></span></li>
</ul>
</div>
</div>
<div class="efooter">
<table>
<tr>
<td class="btue" id='tdone'>推荐科室</td>
<td id='tdtwo'>全部科室</td>
</tr>
</table>
</div>
</body>
js部分:
$(function(){
//图片进行切换
$(".uli").click(function(){
//内容版面的各个对象进行获取坐标值
var $count=$(".uli").index(this);
var $mobj=$(".mycontent li img");
var $mobli=$(".mycontent li");
var $mohead=$('.ohead');
var $imgchange=$($mobj[$count]);
//显示选取版面信息
var $aready=$('.ohead .nconent');
//算高度
var $areadylength=0;
if ($imgchange.attr("src")==="1.png") {
//说明勾选了代表为选取了此科室
$imgchange.attr("src","2.png");
//进行对选取内容版面的高度设置$mohead.height()是一个整数
//求出的是可以放多少个内容值的块
$areadylength=Math.ceil(($aready.length+1)/4);
//动态进行添加一个div
$addept="<div class='nconent' onClick='showimage(this)'>"+$($mobli[$count]).text()+"<img src='x.png' onClick='deletdiv(this)'></div>"
//动态的添加
$mohead.append($addept);
//alert($aready.length);
}else{
$imgchange.attr("src","1.png");
//alert($($aready[0]).text())
//当切换科室完之后，说明不选此科室
for(var i=0;i<$aready.length;i++){
//jQuery中append对应的是detach而不是remove
//进行匹配信息的对应是否对应
if($($mobli[$count]).text()===($($aready[i]).text())){
//进行删除对应取消的对象
$($aready[i]).detach();
}
}
$areadylength=Math.ceil(($aready.length-1)/4);
if ($areadylength<=0) {$areadylength=1};
}
setButtonColor();
$mohead.css("height",($areadylength*30)+"px");
});
//进行切换成全部科室
$('#tdone').click(function(){
$("#tdtwo").removeClass("btue");
$('#tdone').addClass("btue");
$('.alldept').hide();
$('.recommendept').show();
});
//进行切换成全部科室
$('#tdtwo').click(function(){
$("#tdone").removeClass("btue");
$('#tdtwo').addClass("btue");
$('.recommendept').hide();
$('.alldept ').show();
});
//下面的是进行keyup的操作
$('.textcontent').keyup(function(){
//键入一个文字就进行查询处理
$keytext=new RegExp($('.textcontent').val());
$("#tdone").removeClass("btue");
$("#tdtwo").addClass("btue");
//进行切换成全部科室
$('.recommendept').hide();
$('.alldept ').show();
//进行遍历全部科室的科室名
var $allmobli=$('.alldept .mycontent li');
for(var lz=0;lz<$allmobli.length;lz++){
var $deptcontent=$($allmobli[lz]).text();
//进行文字的匹配
if($keytext.test($deptcontent)){
$($allmobli[lz]).show();
}else{
$($allmobli[lz]).hide();
}
}
});
//进行确定的处理
$('#conbtnll').click(function(){
//如果为空的话就进行以下的操作
//显示选取版面信息
var $aready=$('.ohead .nconent');
var $array=[];
var $endcontent=null;
if ($aready.length) {
for(var i=0;i<$aready.length;i++){
$array[i]=$($aready[i]).text();
}
$endcontent=$array.join(" ");
$('#enda').attr("href","dept.html?name="+$endcontent);
alert("你选择的科室为:"+$endcontent);
$('#enda').click();
}else{
alert("请选择你需要的科室");
return false;
}
});
});
//点击图片进行图片的显示
function showimage(mdata){
//进行事件的点击，触发为图片进行
$(mdata).find("img").show();
}
//当点击添加的科室进行把这个div进行去掉
function deletdiv(mdata){
//显示选取版面信息
var $parentdiv=$(mdata).parent();
//下面是进行对下面的图标进行打钩变成圆圈
//获取取消的图标的信息的图标
var $contenttest=$parentdiv.text();
var $mobj=$(".mycontent li img");
var $mobli=$(".mycontent li");
for(var j=0;j<$mobli.length;j++){
if ($($mobli[j]).text()===$contenttest) {
//值相等的时候就进行不打勾处理
$($mobj[j]).attr('src','1.png');
};
}
//去掉这个div
$parentdiv.detach();
//显示选取版面信息样式进行高度的调整
var $aready=$('.ohead .nconent');
var $mohead=$('.ohead');
$areadylength=Math.ceil(($aready.length-1)/4);
if ($areadylength<=0) {$areadylength=1};
$mohead.css("height",($areadylength*30)+"px");
setButtonColor();
}
function setButtonColor(){
if($('.ohead .nconent').length==0){
$('#conbtnll').css("background-color","#e3e3e3");
}else{
$('#conbtnll').css("background-color","#00CCFF");
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- android一个动态添加删除网格视图的demo，可把状态保存在数据库中
- JqueryMobile为Listview动态添加、删除查询功能
- android 时间轴 （可动态添加时间轴的内部内容，没实现删除功能）
- 一个iOS图片选择器的DEMO(实现图片添加，宫格排列，图片长按删除，以及图片替换等功能)
- 使用jQuery动态创建一个表格（根据用户输入的内容添加一行数据，并且能逐行删除）
- 一个iOS图片选择器的DEMO(实现图片添加，宫格排列，图片长按删除，以及图片替换等功能)
- svn在linux下的使用（svn命令行）ubuntu 删除 新增 添加 提交 状态查询 恢复
- 这是一个关于XML文档的操作管理器XMLHelper类,类中包括XML文档的创建,文档节点和属性的读取,添加,修改,删除的方法功能的实现
- 返璞归真 asp.net mvc (1) - 添加、查询、更新和删除的 Demo
- 一个动态添加panel 和 删除panel的例子
- C++ Demo 001: 读取一个从命令行指定的文件，输出文件内容到显示器，并且给每一行输出添加一个行号
- 返璞归真 asp.net mvc (1) - 添加、查询、更新和删除的 Demo
- Quartz(二）在Spring中动态启动，暂定，添加，删除定时功能
- 动态添加/删除一个对象
- .NET中用弹出窗口添加或修改一个页面，当添加或修改相关内容后按下提交按钮自动刷新页面的JS代码
- 动态添加删除 Spinner内容
- 再接再厉VS 2008 sp1 + .NET 3.5 sp1(1) - Entity Framework(实体框架)之添加、查询、更新和删除的Demo
- 一个发邮件的类，带验证功能，可以发html内容，可以添加附件，并解决附件乱码问题。
- Javascript 动态添加&删除列表框内容
- 动态地向一个select框添加内容