jquery动态创建小demo记录

最新推荐文章于 2021-03-18 14:38:42 发布
Strugglexia
最新推荐文章于 2021-03-18 14:38:42 发布
阅读量697
点赞数 1
分类专栏： jquery
本文链接：https://blog.csdn.net/qq_38395165/article/details/78501788
版权
jquery 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.10.2.min.js"></script>
    <title>Title</title>
    <style>
        .fl{float:left;}
        .fr{float:right;}
        .none{display:none}
        a{cursor: pointer;}
        li{list-style: none}
        body{padding:0px 50px;font-size:14px;}
        .carBox{width:100%;heigth:300px;padding:30px 0px;}
        .carBox ul{width:100%;}
        .carBox ul li{float:left;width:100%;margin-bottom:15px;}
        .carBox ul li span{float:left;margin-right:5px;}
        .carBox ul li.danjuBox span img{width:80px;height:100px;}
        .inpuBox{width:100%;}
        .inpuBox ul li{width:100%;float:left;margin-bottom:20px;}
        .inpuBox ul li span{display:inline-block;width:80px;line-height: 30px;float: left;}
        .inpuBox ul li input{width:300px;height:30px;padding-left:10px;}
        .inpuBox ul li:nth-child(3),.inpuBox ul li:nth-child(2){width:40%;}
        .inpuBox ul li textarea{width:62%;height:100px;float: left;resize:none;padding-left:10px;padding-top:10px;}
        .inpuBox ul li span.num,.inpuBox ul li span.total{width:20px;}
        .inpuBox ul li.numberBox{position: relative;}
        .inpuBox ul li span.shuBox{position:absolute;top:85px;right:425px;}
        .inpuBox ul li:last-child{display:inline-block;width:150px;height:30px;background:#F78B25;color:#fff;margin-left:100px;
            text-align:center;line-height: 30px;cursor: pointer;}
        .addBox{width:70%;padding:15px 0px;}
        .inpuBox ul li a.delete{width:16px;height:16px;display:inline-block;}
    </style>
</head>
<body>
   <div class="carBox fl">
      <ul>
          <li>车辆1:</li>
          <li>
              <span>丰田兰德酷路泽4500 GXR 2016款美规汽油版</span>
              <span>3台</span>
          </li>
          <li>
              <span>车架号: </span>
              <span> 666666666666666,88888888888,111111111111</span>
          </li>
          <li>
              <span>详细配置: </span>
              <span class="detailSet">
                    金属包 高级包 无钥匙进入无钥匙启动 全景 20轮 采标 前座椅通风加热 14项座椅调节 车床黑色高亮装饰。
              </span>
              <a class="fl delete">
                  <img src="imges/rubbish2.png" alt="">
              </a>
          </li>
          <li class="danjuBox">
              <span>相关单据:</span>
              <span>
                  <img src="imges/danju.png" alt="">
                  <img src="imges/danju.png" alt="">
                  <img src="imges/danju.png" alt="">
              </span>
          </li>
      </ul>
       <ul>
           <li>车辆1:</li>
           <li>
               <span>丰田兰德酷路泽4500 GXR 2016款美规汽油版</span>
               <span>3台</span>
           </li>
           <li>
               <span>车架号: </span>
               <span> 666666666666666,88888888888,111111111111</span>
           </li>
           <li>
               <span>详细配置: </span>
               <span class="detailSet">
                    金属包 高级包 无钥匙进入无钥匙启动 全景 20轮 采标 前座椅通风加热 14项座椅调节 车床黑色高亮装饰。
              </span>
               <a class="fl delete">
                   <img src="imges/rubbish2.png" alt="">
               </a>
           </li>
           <li class="danjuBox">
               <span>相关单据:</span>
               <span>
                  <img src="imges/danju.png" alt="">
                  <img src="imges/danju.png" alt="">
                  <img src="imges/danju.png" alt="">
              </span>
           </li>
       </ul>
   </div>
   <div class="addBox fl">
       <a >+ 新增</a>
   </div>
   <div class="inpuBox fl">
      <ul>
          <li>车辆信息:</li>
          <li>
              <span>车型</span>
              <input type="text" placeholder="请输入具体车型" class="carType">
          </li>
          <li>
              <span>数量</span>
              <input type="text" placeholder="请输入数量" class="carNum">
          </li>
          <li>
              <span>车架号</span>
              <textarea placeholder="请输入车架号,多个车架号用逗号隔开" class="carIndex"></textarea>
          </li>
          <li class="numberBox">
              <span>详细配置:</span>
              <textarea placeholder="请输入车辆的详细配置" class="carDe" id="textArea"></textarea>
              <span class="shuBox">
                  <span class="num" id="textNum">0</span>
                  <span class="total">/300</span>
              </span>
          </li>
          <li>
              <a class="save">保存</a>
          </li>
      </ul>
   </div>
   <script>
       $(function() {
           //点击carBox里面的删除按钮
           $(".carBox").on("click","a.delete",function(){
               $(this).parent().parent().remove();
               for(var i = 2;i < $(".carBox>ul").length;i++){
                   $(".carBox > ul").eq(i).children("li.xuhao").text("车辆" + (i + 1));
               }
           });
           //动态创建里面的删除;
           $(".carBox").on("click","a.delelte",function(){
               $(this).parent().parent().hide();
               $(".addBox").css("border","none");
           });
           //点击添加
           $(".inpuBox").hide();
           $(".addBox").css("border","none");
           $(".addBox>a").click(function(){
               $(this).parent().css('border-bottom','1px solid #ddd');
               $(".inpuBox").show();
           })
           //点击保存-生成到上面内容
           var i = 2;
           $(".inpuBox li>a.save").on("click", function () {
               var carType = $(".inpuBox li>input.carType ").val();
               var carNum = $(".inpuBox li>input.carNum ").val();
               var carIndex = $(".inpuBox li>textarea.carIndex ").val();
               var carDe = $(".inpuBox li>textarea.carDe ").val();
               if (carType !== '' && carNum !== '' && carIndex !== '' && carDe !== '') {
                   $(this).parent().parent().parent("div.inpuBox").hide();//点击保存，整个盒子隐藏
                   i++;
                   var str = '<ul>' +
                       '<li class="xuhao">车辆 '+ i +':</li>' +
                       '<li><span>' + carType +'</span><span>' + carNum +'</span>台</li>' +
                       '<li>车架号:' + carIndex + '</li>' +
                       '<li>' +
                             '<span>详细配置:</span>' +
                             '<span>' + carDe + '</span>' +
                              '<a class="fl delelte">' +
                                   ' <img src="imges/rubbish2.png" alt="">' +
                              '</a>' +
                       '</li>' +
                    '</ul>';
                   $('.carBox').append(str);
                   $(".inpuBox li>input.carType ").val('');
                   $(".inpuBox li>input.carNum ").val('');
                   $(".inpuBox li>textarea.carIndex ").val('');
                   $(".inpuBox li>textarea.carDe ").val('');
               } else {
                   return;
               }
           });
           $('#textArea').on("keyup",function(){
               $("#textNum").text($('#textArea').val().length);//这句是在键盘按下时,实时的显示字数
               if($('#textArea').val().length>300){
                   $('#textNum').text(300);//长度大于300时0处显示的也只是300
                   $('#textArea').val($('#textArea').val().substring(0,300));//长度大于300时截取前300个字符;
               }
           });
           $("#textNum").text($('#textArea').val().length);//这句是在刷新的时候仍然显示字数
       });
   </script>
</body>
<!--
    一般情况下,textarea是被固定宽度和高度的,若不愿意让其任意缩放,可以为textarea添加resize:none的css属性;这样就可去除webkit内核的浏览器的默认显示;
    以下是resize属性的各个取值:
    none:用户不能操纵机制调节元素的尺寸;
    both:用户可以调节元素的宽度和高度;
    horizontal:用户可以调节元素的宽度;
    vertical:让用户可以调节元素的高度;
    inherit:默认继承;
-->
</html>