1

好的，设置如下：我有一个“表单”表格，我正在使用 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));
        });
4

2 回答 2

1

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

我稍微修改了您的按钮以添加/删除包含的类，然后在计算时检查它：

        $('#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);
        });​
于 2012-08-24T12:26:16.647 回答
0

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

于 2012-08-23T19:35:18.803 回答