javascript - 如何编写javascript计算数组

Question

为什么 2 数组不能按 + 或 -
所以我想得到这个价格和数量将求和并获得数量价值

当您还和价格和系统将以金额形式获取价值时，下面的总额将发生变化（它从金额中提取）

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th class="span1" style="text-align:center;">Delete</th>
            <th class="span12" style="text-align:center;">Name</th>
            <th class="span2" style="text-align:center;">Price</th>
            <th class="span2" style="text-align:center;">Quantity</th>
            <th class="span2" style="text-align:center;">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center; vertical-align:middle;">
                <a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
            </td>
            <td style="text-align:left; vertical-align:middle;">test</td>
            <td style="text-align:center; vertical-align:middle;">24</td>
            <td style="text-align:center; vertical-align:middle;">
                <div class="input-append">
                    <input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
                    <button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
                    <button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
                </div>
            </td>+63
            <td style="text-align:right; vertical-align:middle;"></td>
        </tr>
        <tr>
            <td style="text-align:center; vertical-align:middle;">
                <a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
            </td>
            <td style="text-align:left; vertical-align:middle;">test</td>
            <td style="text-align:center; vertical-align:middle;">24</td>
            <td style="text-align:center; vertical-align:middle;">
                <div class="input-append">
                    <input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
                    <button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
                    <button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
                </div>
            </td>+63
            <td style="text-align:right; vertical-align:middle;"></td>
        </tr>                               
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3"></td>
            <td style="text-align:center; vertical-align:middle;">
                <strong>Total</strong>
            </td>
            <td style="text-align:right; vertical-align:middle;"></td>
        </tr>
    </tfoot>
</table>

JavaScript如下：

    button_up=document.getElementById('up');
    button_down=document.getElementById('down');

    button_up.onclick=function() {setQuantity('up');}
    button_down.onclick=function() {setQuantity('down');}

    quantity = document.getElementById('quantity[]');

    function setQuantity(upordown) {
    if (quantity.value > 1) {
            if (upordown == 'up') {++quantity.value;}
    else if (upordown == 'down') {--quantity.value;}
        }
        else if (quantity.value == 1) {
            if (upordown == 'up') {++quantity.value;}
        }
        else
            {quantity.value=1;}
    }

http://jsfiddle.net/Danglebz/ucdpx/

score 1 · Accepted Answer

不同对象的许多小修复相同的 id 并不好，并且 js 代码必须更具可移植性，所以如果你有 1000 行，最好的方法是使用事件委托，但有一个版本

function setQuantity(e) {
            var upordown = $(e.target).hasClass("up") ? "up" : "down"
                , objQt = $(e.target).closest("div").find("input");

            if (parseInt(objQt.val(), 10) > 1) {
                if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}
                else if (upordown == 'down'){objQt.val(parseInt(objQt.val(),10)-1);}}
            else if (objQt.val() == 1) {
                if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}}
            else
                {objQt.val(1);}
        }

$(".btn").click(setQuantity);

http://jsfiddle.net/ucdpx/2/

javascript - 如何编写javascript计算数组

1 回答 1

Related

Reference