订单增加删除修改内容

最新推荐文章于 2019-11-21 10:43:12 发布

moonlight201868

最新推荐文章于 2019-11-21 10:43:12 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/moonlight201868/article/details/80819191

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #table1{
            margin: 50px auto;
            width: 600px;
        }
        .title1{
            background-color: #CCCCCC
        }
       div{
           width: 598px;
           height: 50px;
           margin: -51px auto;
           border: 1px solid;
           display: flex;
           justify-content: center;
           align-items: center;
       }
       .btn3{
           width: 100px;
           height: 30px;
       }

    </style>
</head>
<body>

       <table id=table1   border="1" cellspacing="0" cellpadding="14">
           <tr class="title1">
               <th>商品名称</th>
               <th>数量</th>
               <th>单价</th>
               <th>操作</th>
           </tr>
           <tr class="title2">
               <th>保湿面膜</th>
               <th>5</th>
               <th>￥48</th>
               <th>
                   <input type="button" value="修改" class="btn1">
                   <input type="button" value="删除" class="btn2">
               </th>
           </tr>

       </table>
       <div class="box">
           <input type="button"  value="增加订单" class="btn3">
       </div>
       <script>
           window.onload=function () {
               var btn1 = document.getElementsByClassName("btn1")[0];
               var btn2 = document.getElementsByClassName("btn2")[0];
               var btn3 = document.getElementsByClassName("btn3")[0];
               var title1 = document.getElementsByClassName("title1")[0];
               var title2 = document.getElementsByClassName("title2");
               var table1 = document.getElementById("table1");
               var tr = document.getElementsByTagName("tr");
               var m=0;


               btn3.onclick = function () {
                   var otr = document.createElement("tr");
                   var th1 = document.createElement("th");
                   var th2 = document.createElement("th");
                   var th3 = document.createElement("th");
                   var th4 = document.createElement("th");
                   var n=0;


                   otr.appendChild(th1);
                   otr.appendChild(th2);
                   otr.appendChild(th3);
                   otr.appendChild(th4);
                   table1.appendChild(otr);
                   th1.innerHTML = "保湿面膜";
                   th2.innerHTML = "5";
                   th3.innerHTML = "￥48";
                   th4.innerHTML = "<input type='button' value='修改' class='btn4'>" + " " +
                           "<input type='button' value='删除' class='btn5'>";
                   var btn4 = document.getElementsByClassName("btn4")[m];
                   var btn5 = document.getElementsByClassName("btn5")[m++];

                   btn5.onclick = function () {
                       otr.parentElement.removeChild(otr);
                       m--;
                   };
                   btn4.onclick = function () {
                       if(n==0) {
                           btn4.value = "确定";
                           n++;
                           th1.innerHTML="<input  type='text' class='gg' value='"+th1.innerHTML+"' />";
                           th2.innerHTML="<input type='text' class='gg' value='"+th2.innerHTML+"' />";
                           th3.innerHTML="<input type='text' class='gg' value='"+th3.innerHTML+"' />";
                       }
                       else if(n==1){
                           var gg=document.getElementsByClassName("gg");
                           var a=gg[0];
                           var b=gg[1];
                           var c=gg[2];
                           btn4.value="修改";
                           n--;
                           th1.innerHTML=a.value;
                           th2.innerHTML=b.value;
                           th3.innerHTML=c.value;
                       }
                   }
               }
           }
       </script>
</body>
</html>

moonlight201868

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
订单增加删除修改内容

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin: 0;p
复制链接

扫一扫