用jQuery如何实现

发布网友发布时间：2022-04-26 13:38

共1个回答

热心网友时间：2022-04-22 23:53

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="css.css" type="text/css" media="screen">
    <script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
    <style type="text/css">table tr td{border:1px solid #ddd;padding:15px;text-align: center;background: #f3f3f3}input{text-align: center;}</style>
    <div></div>
    <div></div>
    <table id="t">
        <tr>
            <td></td><td>name</td><td>单价</td><td>数量</td><td>总价</td><td>del</td>
        </tr>
        <tr>
            <td>1</td><td>htc</td><td>￥<span>1395.00</span></td><td><input type='button' value='-' onclick='less(this)'><input type='text' style='width:30px' name='num' value='1'><input type='button' value='+' onclick='more(this)'></td><td><span></span></td><td><span onclick='del(this)'>del</span></td>
        </tr>
        <tr>
            <td>2</td><td>apple</td><td>￥<span>5555.00</span></td><td><input type='button' value='-' onclick='less(this)'><input type='text' style='width:30px' name='num' value='1'><input type='button' value='+' onclick='more(this)'></td><td><span></span></td><td><span onclick='del(this)'>del</span></td>
        </tr>
        <tr>
            <td>3</td><td>Mac</td><td>￥<span>9999</span></td><td><input type='button' value='-' onclick='less(this)'><input type='text' style='width:30px' name='num' value='1'><input type='button' value='+' onclick='more(this)'></td><td><span></span></td><td><span onclick='del(this)'>del</span></td>
        </tr>
        <tr>
            <td COLSPAN='6'>合计:￥<span></span></td>
        </tr>
    </table>
    <input type="button" value="加一行" onclick="tr_more()">
    <script type="text/javascript">
        $(function(){
            heji();
        })
        function heji(){
            var tr=$("#t").find("tr").length;
            var total=0;
            for(i=1;i<tr-1;i++){//略过第一行和最后一行
                var price=$('table#t tr:eq('+i+') td:eq(2)').find('span').html();
                var num=$('table#t tr:eq('+i+') td:eq(3)').find('input:eq(1)').val();
                $('table#t tr:eq('+i+') td:eq(4)').find('span').html('￥'+eval(price*num));
                total=eval(total+eval(price*num));
            }
            $('table#t tr:eq('+eval(tr-1)+') td').find('span').html(total);
        }
        function less(e){
            var num=$(e).parent().find('input:eq(1)').val();
            if(num<=0){num=0}else{num--}
            $(e).parent().find('input:eq(1)').val(num);
            heji();
        }
        function more(e){
            var num=$(e).parent().find('input:eq(1)').val();
            if(num<0){num=0}else{num++}
            $(e).parent().find('input:eq(1)').val(num);
            heji();
        }
        function del(e){
            $(e).parent().parent().remove();
            heji();
        }
        function tr_more(){
            var tr=$("#t").find("tr").length;
            var trr=tr-2;
            var newRow = "<tr><td>"+eval(tr-1)+"</td><td>Mac</td><td>￥<span>9999</span></td><td><input type='button' value='-' onclick='less(this)'><input type='text' style='width:30px' name='num' value='1'><input type='button' value='+' onclick='more(this)'></td><td><span></span></td><td><span onclick='del(this)'>del</span></td></tr>";
            $('table#t tr:eq('+trr+')').after(newRow);
            heji();
        }
    </script>
</body>
</html>