Question

好的，这是设置：我在“表单”中有一个表，我使用ContentEditable HTML属性（在表的父元素上设置）编辑其内容。共有四列 - 两组“项目描述”列和两组匹配的“价格”列，以及底部的一个区域，我希望显示总价格。

问题＃1是我不确定当我不使用输入和字段时如何计算单元格之间的数字总和。使事情变得复杂（至少对我而言）是我使用Jquery动态地向表中添加行。

问题＃2是第二组描述/价格列是可选的 - 我希望能够使用“添加”按钮来触发这些列中的各个项目添加到总数中。

编辑：我尝试了一些随机的东西，并通过将单元格的值存储在数组中，然后告诉Jquery添加该数组的内容并输出总和，取得了一些成功。现在的问题是它没有给我一笔钱，它给了我没有空格的数组内容。例如，如果数组包含1,2,3则它给出123而不是6。

编辑＃2：在将六个教程的点点滴滴拼凑起来之后，我得到了一些适用于问题＃1的东西。现在问题＃2！

var sumArray = []
            $('#calc').click(function(){ 
                $('table tbody tr').each(function() {
                    sumArray.push($(this).find('.cost').text().match(/\d+/));                       
                });
                var total = 0;
                for (var i = 0; i < sumArray.length; i++) {
                    total += parseInt(sumArray[i]);
                }
                $('.totalcost').text(total);

            });

这是表格代码：

<table>
            <thead>
                <tr>
                        <th>Service</th>
                        <th>Cost</th>
                        <th>Complementary (Optional) Service</th>
                        <th>Cost</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                <td class="cost"></td>
                    <td></td>
                    <td class="compcost"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>

                        <th>Total</th>
                        <th class="totalcost"></th>

                </tr>
            </tfoot>
        </table>
        <span id="add">Add</span>
        <span id="remove">Remove</span>
        <span id="reset">Reset</span>
        <span id="nocomp">No Comps</span>
        <span id="calc">Calculate Total</span>
    </div>

这是我现在正在使用的JS。

//Add fields to table
            var i = $('tbody>tr').size() + 1;

            $('#add').click(function() {
                if ($("tbody tr:first-child td").length > 2) {
                $('<tr><td></td><td class="cost"></td><td></td><td class="compcost"></td></tr>').fadeIn('slow').appendTo('tbody');
                i++;
                }
                else
                {$('<tr><td></td><td class="cost"></td></tr>').fadeIn('slow').appendTo('tbody');
                i++;
                };

            });

            $('#remove').click(function() {
            if(i > 1) {
                $('tbody>tr:last').remove();
                i--;
            }
            });

            $('#reset').click(function() {
            while(i > 2) {
                $('tbody>tr:last').remove();
                i--;
            }
            });

            $('#nocomp').click(function(){
                if ($("tbody tr td").length > 2) {
                $('thead tr th:nth-child(2),thead tr th:nth-child(3),tbody>tr td:nth-child(2),tbody>tr td:nth-child(3)').remove();
                }
            });

        /*$('#calc').click(function(){
            $('table tbody tr').each(function() {
            $(this).find('.totalcost').text(
            parseFloat($(this).find('.cost').text())
        );
            });
        });*/

        $('#calc').click(function(){ 
            $(this).find('table tbody tr td.cost').each(function(idx)
            {
                var total = $(this).text();
                count += total;                          
            });
            alert(parseInt(count));
        });

Answer 1

看看这个jsFiddle，它可能是你想要的： http://jsfiddle.net/mPvyA/3/

我稍微修改了你的按钮以添加/删除一个包含的类，然后在calculate上检查它：

        $('#exccomp').click(function(){
            $('table').find('.compcost').removeClass('included');
        });

        $('#inccomp').click(function(){
            $('table').find('.compcost').addClass('included');
        });

        $('#calc').click(function(){ 
            var sumArray = [];
            $('table tbody tr').each(function() {
                var $this = $(this), 
                    includedCompCost = $this.find('.compcost').filter('.included').text().match(/\d+/);
                sumArray.push($this.find('.cost').text().match(/\d+/)); 
                if (includedCompCost !== "") { sumArray.push(includedCompCost); }
            });
            var total = 0;
            for (var i = 0; i < sumArray.length; i++) {
                var parsedInt = parseInt(sumArray[i]); 
                if (!isNaN(parsedInt) && parsedInt > 0) { 
                   total += parsedInt; 
                } 
            }
            $('.totalcost').text(total);
        });

Answer 2

使用parseInt（在您添加的各个部分，而不仅仅是结果）将字符串转换为数字，否则+将连接它们而不是添加它们。

使用Jquery计算contentEditable文本中的数字总和

2 个答案: