商品购物车增减

效果：点击添加，添加一行ｔｒ内容一样点击删除，删除一行，点击修改，修改按钮变为确认按钮，里面内容可
修改，点击确认，则无法修改
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #head {
            width: 500px;
            text-align: center;
            margin: 0 auto;
        }
        td{
            height: 50px;
            line-height: 25px;
        }
        .act {
            border: none;
            outline: none;
        }
    </style>
</head>
<body>
<table id="head" border="1px" cellspacing="0" cellpadding="2">
        <tr bgcolor="#a9a9a9">
            <td>商品名称</td>
            <td>数量</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
    <tbody id="biao">
            <tr>
                <td>玫瑰</td>
                <td>5</td>
                <td>￥48</td>
                <td>
                    <button onclick="fa(this)">删除</button>
                    <button onclick="fb(this)">修改</button>
                </td>
            </tr>
            <tr id="tian">
                <td colspan="4">
                    <button id="jia">添加订单</button>
                </td>
            </tr>
    </tbody>
</table>
<script>
    var ojia = document.getElementById("jia");
    var obiao = document.getElementById("biao");
    var otian = document.getElementById("tian");
    ojia.onclick = function () {
        var otr = document.createElement("tr");
        otr.innerHTML ='  <td>玫瑰</td>\n' +
            '                <td>5</td>\n' +
            '                <td>￥48</td>\n' +
            '                <td>\n' +
            '                    <button onclick="fa(this)">删除</button>\n' +
            '                    <button onclick="fb(this)">修改</button>\n' +
            '                </td>'
        obiao.insertBefore(otr, otian);
    }
    function fa(a) {
        obiao.removeChild(a.parentNode.parentNode)
    }
    function fb(b) {
        b.innerHTML = "确认";
        var In = document.createElement("input");
        var tet = b.parentNode.parentNode.firstElementChild.innerHTML;;
        In.className = "act";
        In.value = tet;
        b.parentNode.parentNode.firstElementChild.innerHTML = "";
        b.parentNode.parentNode.firstElementChild.appendChild(In)

        b.onclick = function () {
            fc(this)
        }
    }
    function fc(b) {
        var otd = b.parentNode.parentNode.firstElementChild;
        b.innerHTML = "修改";
        otd.innerHTML = otd.firstElementChild.value;
        b.onclick = function () {
            fb(this)
        }
    }


</script>
</body>
</html>
猜你喜欢
