angular带加减按钮

最新推荐文章于 2019-07-27 11:14:47 发布

拥抱大树

最新推荐文章于 2019-07-27 11:14:47 发布

阅读量811

点赞数

分类专栏： UI日常练习文章标签： angular加减按钮和添加

本文链接：https://blog.csdn.net/qq_42818575/article/details/81259567

版权

UI日常练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

10课技能练习

    <style type="text/css">
        ul{
            list-style: none;
        }
    </style>
</head>
<body>

    <ul>
        <li><h3>上传图书</h3></li>
        <li>书名:<input type="" name="bname" id="bname" value="" placeholder="书名不能为空" /></li>
        <li>价格:<input type="" name="bprice" id="bprice" value="" placeholder="价格大于0" /></li>
        <li>数量:<input type="" name="bnum" id="bnum" value="" placeholder="数量为整数" /></li>
        <li><input type="button" id="add" value="上传" /></li>
    </ul>
    <input type="button" id="" value="批量删除" onclick="delAll()" />
    <table border="0" cellpadding="0" cellspacing="10" >
        <tr>
            <td><input type="checkbox" id="" value="" onclick="changbj(this)" /></td>
            <td><img src="img/a.png"/></td>
            <td>Java艺术1</td>
            <td>￥50</td>
            <td>
                <input type="button" id="" value="-" onclick="reduce(this)" />
                <input type="text" id="" value="20" />
                <input type="button" id="" value="+" onclick="plus(this)" />
            </td>
            <td>小计:￥50</td>
            <td><input type="button" value="删除" onclick="del(this)"  /></td>
        </tr>

        <tr>
            <td><input type="checkbox" id="" value="" onclick="" /></td>
            <td><img src="img/a.png"/></td>
            <td>Java艺术2</td>
            <td>￥50</td>
            <td>
                <input type="button" id="" value="-" />
                <input type="text" id="" value="20" />
                <input type="button" id="" value="+" />
            </td>
            <td>小计:￥50</td>
            <td><input type="button" value="删除" onclick="del(this)"  /></td>
        </tr>
    </table>

    <script type="text/javascript">

        //删除一行数据
        function del(obj){
            var result = confirm("您确定要删除吗?");

            if (result) {
                $(obj).parent().parent().remove();//删除
            }
        }
        //批量删除
        function delAll(){
            //得到所有选中的checkbox
            var cbs = $("input:checked");
            if (cbs.length==0) {
                alert("请选择!");
            }else{
                cbs.each(function(){
                    $(this).parent().parent().remove();
                });
            }

        }
        //数量加加
        function plus(obj){
            //得到数量控件
            var eleNum = $(obj).prev("input");
            //得到值
            var v = eleNum.val();

            v++;
            //进行赋值
            eleNum.val(v);

        }

        //数量减减
        function reduce(obj){
            //得到 数量 控件
            var eleNum = $(obj).next("input");
            //得到值
            var v = eleNum.val();
            //数值减减
            v--;
            //进行赋值
            eleNum.val(v);

        }

        //改变背景色
        function changbj(obj){
            if (obj.checked) {
                $(obj).parent().parent().css("background-color","pink");
            } else{
                $(obj).parent().parent().css("background-color","white");
            }

        }

        //判断书名是否为空和添加图书
        $(function(){
            $("#add").click(function(){
                var bookname=$("#bname").val();
                var bookprice=$("#bprice").val();
                var booknum=$("#bnum").val();
                if (bookname=="") {
                    alert("书名不能为空!");
                    return;
                }

                if (bookprice=="" || bookprice<=0) {
                    alert("书名不能为空!");
                    return;
                }

            //添加图书
            var newtr=
            "<tr>"+
                "<td><input type='checkbox' id='' value=''/></td>"+
                "<td><img src='img/a.png'/></td>"+
                "<td>"+bookname+"</td>"+
                "<td>￥"+bookprice+"</td>"+
                "<td><input type='button' value='-' /><input type='text' value='"+booknum+"' /><input type='button' value='+' /></td>"+
                "<td>小计:￥"+(bookprice*booknum)+"</td>"+
                "<td><input type='button' value='删除' onclick='del(this)'  /></td>"+
            "</tr>"

                $("table").append(newtr);

            });
        });


    </script>


</body>