1

よし、ここにセットアップがあります: ContentEditable HTML 属性 (テーブルの親要素に設定) を使用してコンテンツを編集している「フォーム」にテーブルがあります。全部で 4 つの列があります。2 セットの「商品説明」列と 2 セットの一致する「価格」列、および合計価格を表示したい下部の領域です。

問題 1 は、入力とフィールドを操作していないときに、セル全体の数値の合計を計算する方法がわからないことです。(少なくとも私にとって) 複雑なのは、Jquery を使用して動的にテーブルに行を追加していることです。

問題 2 は、説明/価格列の 2 番目のセットがオプションであることです。[追加] ボタンを使用して、それらの列の個々のアイテムを合計に追加できるようにしたいと考えています。

編集:私はいくつかのランダムなことを試しましたが、セルの値を配列に格納し、Jquery にその配列の内容を追加して合計を出力するように指示することで、いくつかの成功を収めました。今の問題は、それが私に合計を与えているのではなく、空白なしで配列の内容を与えていることです。たとえば、配列に 1,2,3 が含まれている場合、6 ではなく 123 になります。

編集＃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 に答える