jquery表行行总计和总计不起作用

时间：2014-01-07 09:43:21

标签： jquery html

我正在尝试动态计算总计和总计。我已经使用这个惊人的示例jquery table rows line totals and grand total作为基础，并在必要时更改了代码以适应我的项目，但是，我在我的localhost上运行它以查看它是否有效并且它似乎没有计算任何总计和添加/删除按钮似乎也没有工作，我不明白为什么会这样？运行原始代码但不是我的修改版本。

http://jsfiddle.net/9gqdq/

HTML： 

<table border="0" id="invoiceitems">
    <thead>
        <tr>
            <td></td>
            <td><strong>Paper</strong>
            </td>
            <td><strong>Price</strong>
            </td>
            <td><strong>Per Pack</strong>
            </td>
            <td><strong>Quantity</strong>
            </td>
            <td><strong>Total</strong>
            </td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><strong>Total:</strong>
            </td>
            <td>
                <label class="grandtotal"></label>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>
                <input type="button" class="buttondelete" value="Delete" />
            </td>
            <td>
                <input type="text" name="item['. 1 .'][paper]" class="regular-text" value="Glossy   Paper A5" />
            </td>
            <td>
                <input type="text" name="item['. 1 .'][price]" class="price" value="15.99" />
            </td>
            <td>
                <input type="text" name="item['. 1 .'][per_pack]" class="per_pack" value="1000" />
            </td>
            <td>
                <input type="text" name="item['. 1 .'][quantity]" class="quantity" value="1" />
            </td>
            <td>
                <label class="subtotal"></label>
            </td>
        </tr>
    </tbody>
</table>
<p>
    <input type="button" id="buttonadd" value="Add Line" />
</p>

JQuery的： 

$(document).ready(function () {
    $counter = 1;
    $('#buttonadd').click(function () {
        $counter++;
        $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\
        <td><input type="text" name="item[' + $counter + '][paper]" class="regular-text" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][price]" class="price" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][per_pack]" class="per_pack" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][quantity]" class="quantity" value="" /></td>\
        <td><label class="subtotal"></label> </td></tr>');
        $('.quantity , .price').unbind().on('change', function () {
            UpdateTotals(this);
        });
    });
});

$(document).ready(function () {
    $counter = 1;
    $('#buttondelete').click(function () {
        $counter++;
        $('#invoiceitems > tbody tr:last').remove();
        $('.quantity , .price').unbind().on('change', function () {
            UpdateTotals(this);
        });
    });
});

$(function () {
    CalculateSubTotals();
    CalculateTotal();
    // Adding the change events for the Price and
    // quantity fields only..
    // Changing the total should not affect anything
    $('.quantity , .price,').on('change', function () {
        UpdateTotals(this);
    });
});

function UpdateTotals(elem) {
    // This will give the tr of the Element Which was changed
    var $container = $(elem).parent().parent();
    var quantity = $container.find('.quantity').val();
    var price = $container.find('.price').val();
    var per_pack = $container.find('.per_pack').val();
    var subtotal = parseInt(quantity) * parseFloat(price) / parseInt(per_pack);
    $container.find('.subtotal').text(subtotal.toFixed(2));
    CalculateTotal();
}

function CalculateSubTotals() {
    // Calculate the Subtotals when page loads for the 
    // first time
    var lineTotals = $('.subtotal');
    var quantity = $('.quantity');
    var price = $('.price');
    var per_pack = $('.per_pack');
    $.each(lineTotals, function (i) {
        var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).val()) / parseInt($(per_pack[i]).val());
        $(lineTotals[i]).text(tot.toFixed(2));
    });
}

function CalculateTotal() {
    // This will Itearate thru the subtotals and
    // claculate the grandTotal and Quantity here
    var lineTotals = $('.subtotal');
    var quantityTotal = $('.quantity');
    var grandTotal = 0.0;
    var totalQuantity = 0;
    $.each(lineTotals, function (i) {
        grandTotal += parseFloat($(lineTotals[i]).text());
        totalQuantity += parseInt($(quantityTotal[i]).val())
    });

    $('.totalquantity').text(totalQuantity);
    $('.grandtotal').text(parseFloat(grandTotal).toFixed(2));

}

2 个答案:

答案 0 :(得分：1)

首先从 HTML 中删除'[. 1 .']仅使用[1]，

<input type="text" name="item[1][paper]" class="regular-text" 
      value="Glossy Paper A5" />

将所有$(document).ready()合并为一个，同时删除多个unbind().on('change')使用parent selector table，keyup使用change代替$('table#invoiceitems').on('change', '.quantity , .price',function () { UpdateTotals(this); }); 喜欢，

Delete Row

$('table#invoiceitems').on('click','.buttondelete',function () { $counter++; if($('table#invoiceitems tbody tr').length==1){ alert('Cant delete single row'); return false; } $(this).closest('tr').remove(); }); 应该是，

$(document).ready(function () {
    $counter = 1;
    $('#buttonadd').click(function () {
        $counter++;
        $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\
        <td><input type="text" name="item[' + $counter + '][paper]" class="regular-text" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][price]" class="price" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][per_pack]" class="per_pack" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][quantity]" class="quantity" value="" /></td>\
        <td><label class="subtotal"></label> </td></tr>');

    });
    $('table#invoiceitems').on('change', '.quantity , .price',function () {
        UpdateTotals(this);
    });

    $counter = 1;


    $('table#invoiceitems').on('click','.buttondelete',function () {
       $counter++;
       if($('table#invoiceitems tbody tr').length==1){
          alert('Cant delete single row');
          return false;
       }
       $(this).closest('tr').remove();
    });
    CalculateSubTotals();
    CalculateTotal();
});


function UpdateTotals(elem) {
    // This will give the tr of the Element Which was changed
    var $container = $(elem).parent().parent();
    var quantity = $container.find('.quantity').val();
    var price = $container.find('.price').val();
    var per_pack = $container.find('.per_pack').val();
    var subtotal = parseInt(quantity) * parseFloat(price) / parseInt(per_pack);
    $container.find('.subtotal').text(subtotal.toFixed(2));
    CalculateTotal();
}

function CalculateSubTotals() {
    // Calculate the Subtotals when page loads for the 
    // first time
    var lineTotals = $('.subtotal');
    var quantity = $('.quantity');
    var price = $('.price');
    var per_pack = $('.per_pack');
    $.each(lineTotals, function (i) {
        var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).val()) / parseInt($(per_pack[i]).val());
        $(lineTotals[i]).text(tot.toFixed(2));
    });
}

function CalculateTotal() {
    // This will Itearate thru the subtotals and
    // claculate the grandTotal and Quantity here
    var lineTotals = $('.subtotal');
    var quantityTotal = $('.quantity');
    var grandTotal = 0.0;
    var totalQuantity = 0;
    $.each(lineTotals, function (i) {
        grandTotal += parseFloat($(lineTotals[i]).text());
        totalQuantity += parseInt($(quantityTotal[i]).val())
    });
    $('.totalquantity').text(totalQuantity);
    $('.grandtotal').text(parseFloat(grandTotal).toFixed(2));
}

完整代码 

{{1}}

Working Demo

答案 1 :(得分：0)

您的主要问题： JavaScript中的多行字符串必须以每行反斜杠结尾。

这就是导致NOTHING无法工作的原因！

控制台错误：

  

未捕获的SyntaxError：意外的令牌＆lt;

错误字符串示例：

var string = "abc
              def
              ghi";

正确的例子：

var string = "abc\
              def\
              ghi";
相关问题
最新问题