添加删除验证批量删除

最新推荐文章于 2024-07-03 17:17:39 发布

凉介魏

最新推荐文章于 2024-07-03 17:17:39 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/qq_42191634/article/details/80322899

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>商品管理</title>
  <script src="lib/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   ul{
    list-style-type: none;
   }
   .tip{
    color: red;
   }
  </style>
</head>
<body>
  <fieldset id="">
   <legend>添加界面</legend>
   <ul>
    <li>商品名称:<input type="text" id="sname" value="大红袍"><span id="tip_name" class="tip"></span></li>
    <li>商品价格:<input type="text" id="sprice" value="120"><span id="tip_sprice" class="tip"></span></li>
    <li>商品数量:<input type="text" id="snum" value="65"><span id="tip_snum" class="tip"></span></li>
    <li>商品类型:
     <select>
      <option>茶叶</option>
      <option>饮料</option>
     </select><span id="tip_type" class="tip"></span></li>
    <li><input type="button" id="btn_ok" value="添加"></li>
   </ul>
  </fieldset>
  <div>
   <div>
    <button id="btn_all">全选</button>
    <button id="btn_reverse">全不选</button>
    <button id="btn_delall">批量删除</button>
   </div>
   <table border="1" cellpadding="0" cellspacing="0">
    <thead style="background: gray;">
     <tr>
      <td>编号</td>
      <td>商品名称</td>
      <td>商品价格</td>
      <td>商品数量</td>
      <td>商品类别</td>
      <td>小计</td>
      <td>删除</td>
     </tr>
    </thead>
    <tbody></tbody>
   </table>
   <div>
    <span id="stotal">商品总价为：￥0元</span>
   </div>
  </div>

  <script type="text/javascript">
   function del(obj){
    var tr=obj.parentNode.parentNode;
    tr.remove();
    setTrBg();
    calTotal();
   }
   //计算总价
   function calTotal(){
    var total=0;
    var tds=$("tbody tr :nth-child(6)");
    tds.each(function(){
     var v=$(this).text();
     total = total+parseFloat(v);
    });
    $("#stotal").html("商品总价为：￥"+total+"元");
   }
   //设置背景色
   function setTrBg(){
    $("tbody tr:even").css("background","gainsboro");
    $("tbody tr:odd").css("background","white");
   }

   $(function(){

    //添加验证
    $("#btn_ok").click(function(){
     $(".tip").html("");
     //名字
     var name=$("#sname").val();
     if(!(name.length>=2 && name.length<=20)){
      $("#tip_name").html("*商品名称大于2位且小于20位");
      return;
     }
     //商品价格
     var price=$("#sprice").val();
     if(price==""){
      $("#tip_sprice").html("*商品价格不能为空");
      return;
     }
     //商品数量
     var num=$("#snum").val();
     if(parseInt(num)<=0){
      $("#tip_snum").html("*商品数量必须大于0");
      return;
     }
     addShop();
     calTotal();
     setTrBg();

    });

    //添加界面
    function addShop(){
     var name=$("#sname").val();
     var price=$("#sprice").val();
     var num=$("#snum").val();
     var type=$("select :selected").text();
     var count=parseFloat(price)*parseInt(num);

     var newtr = "<tr>"+
     "<td><input type='checkbox'></td>"+
     "<td>"+name+"</td>"+
     "<td>"+price+"</td>"+
     "<td>"+num+"</td>"+
     "<td>"+type+"</td>"+
     "<td>"+count+"</td>"+
     "<td><button οnclick='del(this)'>删除</button></td>"+
     "</tr>";
     $("tbody").append(newtr);

    }
    //全选
    $("#btn_all").click(function(){
     var ches=$("input[type='checkbox']");
     ches.each(function(){
      $(this).prop("checked",true);
     });
    });
    //反选
    $("#btn_reverse").click(function(){
    var ches = $("input:checked");
    ches.each(function(){
     $(this).prop("checked",false);
    });
    });
    //批量删除
    $("#btn_delall").click(function(){
     var ches = $("input:checked");
     ches.each(function(){
      var t=$(this).parent().parent();
      t.remove();
     });
     setTrBg();
     calTotal();

    });



   });

  </script>

</body>
</html>