输入计算

Question

I have several tables which looks like these below:

<table id="table1">
<tr>
    <th>Item</th>
    <th>Price</th>
</tr>
<tr>
    <td>Item 1</a></td>
    <td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
    <td>Item 2</a></td>
    <td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
    <td>Item 3</td>
    <td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>Total:</td>
    <td>$total </td>
</tr>
</table>



<table id="table2">
<tr>
    <th>Item</th>
    <th>Price</th>
</tr>
<tr>
    <td>Item 1</a></td>
    <td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
    <td>Item 2</a></td>
    <td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
    <td>Item 3</td>
    <td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
    <td>Item 4</td>
    <td><input type="text" name="sum4" id="sum4" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>Total:</td>
    <td>$total</td>
</tr>
</table>

Does anybody know if there is a possibility to sum item prices for each input (seperately for table1, table2, etc..) And at the end print sum of items from all items?

Answer 1

You'll need a dom manipulator like jQuery or simply javascript. I'd give the fields a class to make it even easier--say, "sum". Then you can grab all the children "sum"s from the parent tables. Parse their value to an int and add. Not too bad.

Here's a working JS fiddle example

Answer 2

this should be pretty easy with jquery, assuming you can add a class name called "line-item" or something to each input and a class name "total" to the cell which should display calculated sum, you can do

function calculateSum(tableId){
 var sum = 0;
 $(tableId + ' .line-item').each(function(){
   var value = parseFloat($(this).val().trim());
   if(value){
    sum += parseFloat($(this).val());
   }
 });
 $(tableId + ' .total').html(sum);
}

and invoke this function with the id of the table for which you want.

If you cannot add a class name, this don't get tuffer even a single bit, but instead of .line-item try to put just input , it should do the trick in this scenario. Instead of .total you can write tr:last-child td:nth-child(2)

UPDATE: added "parseInt" to avoid string concatenation

Answer 3

Better way is not to call different elements with similar IDs, it's invalid way. But even if so - you can perform calculations for every table simply working with inputs in this table.

Algorithm:

1. You run loop for all <table> tags.
2. For every <table> tag you find all <input>s (no matter what IDs they have);
3. Calculate total sum for all inputs for current table.

You can do this with JavaScript but better for you is jQuery.

BUT: don't call HTML DOM elements with similar IDs. It's wrong!!!