动态表单，为追加元素进行事件绑定,以及图片填充整个div的方法

最新推荐文章于 2023-02-23 13:33:18 发布

懒得多写

最新推荐文章于 2023-02-23 13:33:18 发布

阅读量378

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_45701008/article/details/104209226

版权

动态表单，追加元素的方法，给追加元素进行事件绑定的做法。

效果预览
动态表单
问题总结

追加元素的用法：
append，在父类元素内部末尾位置追加元素。
prepend，在父类元素内部起始位置追加元素。
after，在同级元素之后追加元素。
before，在同级元素之前追加元素。
例：$(".Chunk01 #tableid01").append(val02); val02为字符串。
为追加元素进行事件绑定的用法：
通过父类委托，查找相应子类的进行事件绑定。即格式为：$(父类元素).on(绑定事件，绑定的子类元素，function(){})；
例： $(".Chunk01").on(“click”,“input[type=button]”,function(){}）；
属性查找器的用法：元素名【属性=属性值】，
例：val01=$(".Chunk01 input[type=checkbox]").eq(0).prop(“checked”);
disable用法，.prop（“disable”,true）;禁用按钮。
相似display用法， .css(“display”,“none”);不显示。
如何使得图片布满整个div，首先先设置固定好div的大小，并使得
backguand-size=100%；同时，设置div中的图片为 <img width=100%,height=100%>

布局及样式

<body>
  <div class="Chunk01">
  <form action="josn01.json" method="get">
   <table id="tableid01">
   <tr><th colspan="2">商品</th><th>价格</th><th>数量</th><th>操作</th></tr>
   <tr><td>艾希</td><td><div><img width="100%"height="100%"></div></td>//使得图片布满div
    <td>1000</td><td><input type="button" value="-"></input><input type="text" class="textclass" name="艾希" value="0"></input><input type="button" value="+"></input></td>
    <td><input type="button" value="删除"></input></td></tr>
   <tr><td>瑞文</td><td><div><img width="100%"height="100%"></div></td>
    <td>1000</td><td><input type="button" value="-"></input><input type="text" class="textclass" name="瑞文" value="0"></input><input type="button" value="+"></input></td>
    <td><input type="button" value="删除"></input></td></tr>
   <tr><td>火男</td><td><div><img width="100%"height="100%"></div></td>
    <td>1000</td><td><input type="button" value="-"></input><input type="text" class="textclass" name="火男" value="0"></input><input type="button" value="+"></input></td>
    <td><input type="button" value="删除"></input></td></tr>   
   </table>
   <table>
    <tr><td colspan="4">火男</input><input type="checkbox" name="commodity"></input>艾希<input type="checkbox" name="commodity"></input>瑞文<input type="checkbox" name="commodity">     
    </input></td><td><input type="button" value="添加商品"></td></tr>
    <tr><td colspan="5"><input type="button" value="确认购买"></input></td></tr>
   </table>
  </form>
  </div>
 </body>

<style>
   .Chunk01{width: 600px;height: 600px;border: 1px solid red;margin: 0px auto;text-align: center;}
   .Chunk01 table div{width: 100px;height: 100px;background-size: 100%;}//设置放置图片的div
   .Chunk01 table td,th{border: 1px solid salmon;margin: 0px;}
   .Chunk01 table .textclass{width: 50px;height: 18px;text-align: center;margin: 0px 5px;}//设置显示的文本框。
  </style>

JS实现

<script type="text/javascript" src="jquery-3.4.1.js" ></script>
  <script>
   var val01;
   var val02;
   $(function(){//立即执行
    init();//初始化
    $(".Chunk01").on("click","input[type=button]",function(){//为按钮添加点击事件。注意：以父类元素为媒介，查找固定的子类元素，可以同时实现追加元素的事件绑定。
     val01=$(this).val();
     switch (val01){
      case "+":
       val01=parseInt($(this).prev().val())+1;//使得文本显示框内的值加一
       $(this).prev().val(val01);
       if (val01>0) {
        $(this).prev().prev().prop("disabled",false);
       } 
       break;
      case "-":
       val01=parseInt($(this).next().val())-1;//使得文本显示框内的值减一
       $(this).next().val(val01);
       if (val01==0) {
        $(".Chunk01 table .textclass").prev().prop("disabled",true);
       }
       break;
      case "删除":$(this).parent().parent().remove();//删除本行
       break;
      case "确认购买":console.log("购买成功！");
       break;
      case "添加商品":val01=$(".Chunk01 input[type=checkbox]").eq(0).prop("checked");//根据元素属性类型查找元素，获得多选按钮的选择状态。
       if(val01){
        val02="<tr><td>火男</td><td><div><img width=100%height=100% src='../img/u=3605670816,2748921970&fm=26&gp=0.jpg'></div></td>"
           +"<td>1000</td><td><input type='button' value='-'></input>"
           +"<input type='text' class='textclass' name='火男'></input><input type='button' value='+'></input></td>"
           +"<td><input type='button' value='删除'></input></td></tr>";
        $(".Chunk01 #tableid01").append(val02);//在父类元素末尾追加元素。
       };
       val01=false;
       val01=$(".Chunk01 input[type=checkbox]").eq(1).prop("checked");
       if(val01){
        val02="<tr><td>艾希</td><td><div><img width=100%height=100% src='../img/u=2955269255,597624873&fm=26&gp=0.jpg'></div></td>"
           +"<td>1000</td><td><input type='button' value='-'></input>"
           +"<input type='text' class='textclass' name='艾希'></input><input type='button' value='+'></input></td>"
           +"<td><input type='button' value='删除'></input></td></tr>";
        $(".Chunk01 #tableid01").append(val02);
       }
       val01=false;
       val01=$(".Chunk01 input[type=checkbox]").eq(2).prop("checked");
       if(val01){
        val02="<tr><td>瑞文</td><td><div><img width=100%height=100% src='../img/u=3181800620,3268053175&fm=26&gp=0.jpg'></div></td>"
           +"<td>1000</td><td><input type='button' value='-'></input>"
           +"<input type='text' class='textclass' name='瑞文'></input><input type='button' value='+'></input></td>"
           +"<td><input type='button' value='删除'></input></td></tr>";
        $(".Chunk01 #tableid01").append(val02);
       }
       init();//追加结束后，为追加的元素进行初始化
       break;
     }     
    })
   })
   function init(){
    val01=0;
    $(".Chunk01 .textclass").prop("readonly","true");
    $(".Chunk01 .textclass").val(val01);
    $(".Chunk01 img").eq(0).prop("src","../img/u=2955269255,597624873&fm=26&gp=0.jpg");
    $(".Chunk01 img").eq(1).prop("src","../img/u=3181800620,3268053175&fm=26&gp=0.jpg");
    $(".Chunk01 img").eq(2).prop("src","../img/u=3605670816,2748921970&fm=26&gp=0.jpg");
    $(".Chunk01 table .textclass").prev().prop("disabled",true);
   };
  </script>

懒得多写

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态表单，为追加元素进行事件绑定,以及图片填充整个div的方法

动态表单，追加元素的方法，给追加元素进行事件绑定的做法。效果预览问题总结追加元素的用法：append，在父类元素内部末尾位置追加元素。prepend，在父类元素内部起始位置追加元素。after，在同级元素之后追加元素。before，在同级元素之前追加元素。例：$(".Chunk01 #tableid01").append(val02); val02为字符串。为追加元素进行事件...
复制链接

扫一扫