一个查询内容功能，动态添加内容，删除内容并提交的demo

最新推荐文章于 2024-09-14 12:37:34 发布

左之右

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量386

点赞数

文章标签： jquery html css

本文链接：https://blog.csdn.net/zuozhiyoulaisam/article/details/41515835

版权

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部分:

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");
               }
       }