Fatal编程技术网
  • jquery/
  • jquery表行行总计和总计不起作用

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

jquery html

jquery表行行总计和总计不起作用,jquery,html,Jquery,Html,我试图动态计算行总数和总计。我已经使用这个惊人的例子作为基础，并且在必要的时候改变了代码，以适应我的项目，但是我在我的本地主机上运行它，看看它是否工作，它似乎没有计算任何总数，而且添加/删除按钮似乎也不起作用，我不知道为什么会这样。运行原始代码可以工作，但不是我的修改版本 HTML: <table border="0" id="invoiceitems"> <thead> <tr> <td><

我试图动态计算行总数和总计。我已经使用这个惊人的例子作为基础，并且在必要的时候改变了代码，以适应我的项目，但是我在我的本地主机上运行它，看看它是否工作，它似乎没有计算任何总数，而且添加/删除按钮似乎也不起作用，我不知道为什么会这样。运行原始代码可以工作，但不是我的修改版本

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>

$(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));

}


纸张
价格
每包
数量
总计
总计：
JQuery:

<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>

$(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));

}

$（文档）.ready（函数（）{
$counter=1；
$（'#按钮添加'）。单击（函数（）{
$counter++；
$（'#invoiceitems>tbody:last'）。追加（'\
\
\
\
\
');
$（'.quantity，.price'）.unbind（）.on（'change'，function（）{
更新目录（本）；
});
});
});
$（文档）.ready（函数（）{
$counter=1；
$（“#按钮删除”）。单击（函数（）{
$counter++；
$（'#invoiceitems>tbody tr:last'）.remove（）；
$（'.quantity，.price'）.unbind（）.on（'change'，function（）{
更新目录（本）；
});
});
});
$（函数（）{
计算亚总数（）；
计算总数（）；
//添加价格和价格的更改事件
//仅限数量字段。。
//改变总数不应该影响任何事情
$（'.quantity，.price'）。on（'change'，function（）{
更新目录（本）；
});
});
函数UpdateTotals（elem）{
//这将给出已更改元素的tr
var$container=$（elem.parent（）.parent（）；
var数量=$container.find（'.quantity'）.val（）；
var price=$container.find（'.price'）.val（）；
var per_pack=$container.find（'.per_pack'）.val（）；
var小计=parseInt（数量）*parseFloat（价格）/parseInt（每包）；
$container.find（'.subtotal'）.text（subtotal.toFixed（2））；
计算总数（）；
}
函数CalculateSubTotals（）{
//当页面加载时，计算
//第一次
var lineTotals=$（'小计'）；
变量数量=$（'.quantity'）；
风险值价格=$（“.price”）；
每包变量=$（'.每包'）；
$。每个（行总数，函数（i）{
var tot=parseInt（$（数量[i]）.val（））*parseFloat（$（价格[i]）.val（））/parseInt（$（每包[i]）.val（））；
元(行总数[i]）文本(tot.toFixed(2);；
});
}
函数计算器总计（）{
//这将通过小计和
//在这里计算总数和数量
var lineTotals=$（'小计'）；
变量quantityTotal=$（'.quantity'）；
var grandTotal=0.0；
var totalQuantity=0；
$。每个（行总数，函数（i）{
grandTotal+=parseFloat（$（lineTotals[i]）.text（））；
totalQuantity+=parseInt（$（quantityTotal[i]）.val（））
});
$（'.totalquantity'）。文本（totalquantity）；
$（'.grandtotal'）.text（parseFloat（grandtotal）.toFixed（2））；
}
您的主要问题：JavaScript中的多行字符串必须在每行上以反斜杠结尾

这是什么导致没有任何工作

控制台错误：

未捕获的语法错误：意外标记<

错误字符串的示例：

var string = "abc
              def
              ghi";
正确的例子：

var string = "abc\
              def\
              ghi";
首先从HTML中删除
'[.1.]
，使用
[1]
只需像这样

<input type="text" name="item[1][paper]" class="regular-text" 
      value="Glossy Paper A5" />
而
删除行
应该是这样的

$('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));
}

$（文档）.ready（函数（）{
$counter=1；
$（'#按钮添加'）。单击（函数（）{
$counter++；
$（'#invoiceitems>tbody:last'）。追加（'\
\
\
\
\
');
});
$（'table#invoiceitems'）。关于（'change'，'quantity，'price'，function（）{
更新目录（本）；
});
$counter=1；
$（'table#invoiceitems'）。在（'click'，'buttondelete'，函数（）{
$counter++；
如果（$（'table#invoiceitems tbody tr'）。长度==1）{
警报（“无法删除单行”）；
返回false；
}
$（this）.closest（'tr'）.remove（）；
});
计算亚总数（）；
计算总数（）；
});
函数UpdateTotals（elem）{
//这将给出已更改元素的tr
var$container=$（elem.parent（）.parent（）；
var数量=$container.find（'.quantity'）.val（）；
var price=$container.find（'.price'）.val（）；
var per_pack=$container.find（'.per_pack'）.val（）；
var小计=parseInt（数量）*parseFloat（价格）/parseInt（每包）；
$container.find（'.subtotal'）.text（subtotal.toFixed（2））；
计算总数（）；
}
函数CalculateSubTotals（）{
//当页面加载时，计算
//第一次
var lineTotals=$（'小计'）；
变量数量=$（'.quantity'）；
风险值价格=$（“.price”）；
每包变量=$（'.每包'）；
$。每个（行总数，函数（i）{
var tot=parseInt（$（数量[i]）.val（））*parseFloat（$（价格[i]）.val（））/parseInt（$（每包[i]）.val（））；
元(行总数[i]）文本(tot.toFixed(2);；
});
}
函数计算器总计（）{
//这将通过小计和
//在这里计算总数和数量
var lineTotals=$（'小计'）；
var quantityTotal