开发者

Should I be using an array or object to build a summary?

I'm building an interface that will calculate a total (based on neighboring inputs) when an input is checked. When an input is checked, I'm getting the values of the other inputs in the same <td> and then building a grand total.

Example: http://jsfiddle.net/vdunm/1/

I need to build a summary of totals (grouped by name) for all checkboxes that are checked and I just can't seem to find the right path on how to do it.

So if you were to check the first 3 rows (2 foos and 1 bar) I would want the output to look something like this:

FOO: 100  
BAR: 30

Here's my HTML:

<table id="test">
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="100" />
            <input type="text" name="name" size="20" value="FOO" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="1">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id" size="20开发者_如何学C" value="200" />
            <input type="text" name="name" size="20" value="BAR" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="3">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="300" />
            <input type="text" name="name" size="20" value="FOO" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="9">
        </td>
    </tr>
</table>    

jQuery:

// when the id checkbox is clicked
$('table').delegate('input[name=id]', 'click', function(){

    // set the total at 0
    var totalCost = 0;

    // loop through each checked line
    $('input[name=id]:checked').each(function(){

       // get the input values for this checked row
       var thisRow = $(this).parent(), 
           person = thisRow.find('input[name=name]').val(),
           qty = thisRow.find('input[name=quantity]').val(),
           cost = thisRow.find('input[name=cost]').val();

       // get total
       var lineCost = cost * qty;

       // add to the grand total 
       totalCost+=parseFloat(lineCost);

    });

    // output the total cost
    $('#output').empty().append(totalCost);

});

Should I be building an array or an object? I basically just need to get all names that have been checked, and show a grand total for each. I just need a point in the right direction.


How about something like this?

http://jsfiddle.net/vdunm/2/

It basically just builds an object with the individually grouped totals.


You should be building an object, as long as there's no real sorting required.

Right after your totals you can have these lines:

totalCost += parseFloat(lineCost);

if(totals[person] == null) {
    totals[person] = 0;
}

totals[person] += totalCost;

You would also need to define:

var totals = {};

That would go above your loop.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜