第二周周考技能1

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           li {
               list-style-type: none;
           }

           tr:nth-child(odd) {
               background-color: gainsboro;
           }

           span {
               color: red;
           }
       </style>
       <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
       <script type="text/javascript">
           $(function() {
               $("#add").click(function() {
                   var name = $("#name").val();
                   var price = $("#price").val();
                   var num = $("#num").val();
                   if(name.length < 2 || name.length > 20) {
                       $("#name_span").html("商品名称不合法");
                       return
                   }
                   if(price == undefined || price == "") {
                       $("#price_span").html("商品价格不合法");
                       return
                   }
                   if(num <= 0) {
                       $("#num_span").html("商品数量不能为0");
                       return
                   }
                   addtable();
                   change();
               });

               function addtable() {
                   var name = $("#name").val();
                   var price = $("#price").val();
                   var num = $("#num").val();
                   var type = $("select :selected").val();
                   var sum = price * num;
                   //2.2创建一个新的行(tr)
                   var new_tr = "<tr class='new_tr'>" +
                       "<td><input type='checkBox'/></td>" +
                       "<td>" + name + "</td>" +
                       "<td>" + price + "</td>" +
                       "<td>" + num + "</td>" +
                       "<td>" + type + "</td>" +
                       "<td>" + sum + "</td>" +
                       "<td><button onclick='del(this)'>删除</button></td>" +
                       "</tr>";
                   $("table").append(new_tr);
                   //2.3添加到表格中
               };
               $("#qx").click(function() {
                   var checked = $(":checkbox");
                   checked.prop("checked", true);
               })
               $("#fx").click(function() {
                   var checks = $(":checkbox");
                   checks.each(function() {
                       this.checked = !this.checked;
                   })
               })
               $("#delall").click(function() {
                   var checks = $(":checkbox:checked");
                   checks.each(function() {
                       $(this).parent().parent().remove();
                   })
               });

           })

           function del(obj) {
               $(obj).parent().parent().remove();
               getTotal();
           }
           function change(){
               //初始化总价的变量
               var total = 0;
               var s = $(".new_tr :nth-child(6)");
               s.each(function() {
                   var xiaoji = $(this).text();
                   total = total + parseFloat(xiaoji);
               })

               $("#all").html("商品总价:" + total + "¥");
           }
       </script>
   </head>

   <body>
       <ul>
           <li>商品名称<input type="text" id="name"><span id="name_span"></span></li>
           <li>商品价格<input type="text" id="price"><span id="price_span"></span></li>
           <li>商品数量<input type="number" id="num"><span id="num_span"></span></li>
           <li>商品类型
               <select id="type">
                   <option>----请选择-----</option>
                   <option>食品</option>
                   <option>药品</option>
               </select>
               <span id="name_span"></span></li>
           <li> <button id="add">提交</button></li>
       </ul>
       <button id="qx">全选</button>
       <button id="fx">反选</button>
       <button id="delall">批量删除</button>
       <table id="information" border="1px" cellpadding="0" cellspacing="0" width="400px" ">
           <tr style="background-color: grey; ">
               <td>商品编号</td>
               <td>商品名称</td>
               <td>商品价格</td>
               <td>商品数量</td>
               <td>商品类型</td>
               <td>小计</td>
               <td>操作</td>

           </tr>
       </table>
       <p id="all">商品总价:0¥</p>
   </body>
</html>

猜你喜欢