Member Avatar for arcana55

Hi!

I have the following table:

<table>
<tr>
    <th>Cost</th>
    <th>Quantity</th>
    <th>Sum</th>
</tr>

<tr class="txtMult">
<td class="val1">1</td>
<td><input class="val2" type="text" name="txt/>"</td>
<td><span class="sum">0</span>
</tr>



<tr class="txtMult">
<td class="val1">2</td>
<td><input class="val2" type="text" name="txt/>"</td>
<td><span class="sum">0</span>

</tr>
</table>

What i want to do is to multiple row by row cells: val1*val2. I found the solution, which is working only if value in class val1 is an input value :(. I tried to change value in class val1 to float but it didnt work - as total it displays NaN. Thx for help.

  $(document).ready(function(){
       $(".txtMult input").keyup(multInputs);

       function multInputs() {
           var mult = 0;

           $("tr.txtMult").each(function () {

               var $val1=parseFloat($('.val1', this).val());

               var $val2=parseFloat($('.val2', this).val());

               var $total = ($val1 * 1) * ($val2 * 1)
               $('.sum',this).text($total);
               mult += $total;
           });

  });
  • 3 Contributors
  • 4 Replies
  • 197 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Bachu
Member Avatar for Taywin

which is working only if value in class val1 is an input value

What do you mean by that? If you are talking about if the input value is a number, then you could check whether the value is a number before you attempt to multiply. I don't know what functionality in JQuery which is the same as isNaN() in javascript function. I don't want to suggestion you to use the function directly in JQuery because it could confuse you later on. I would rather look for a similar function which is in JQuery format.

Member Avatar for arcana55

I mean that if i change this: <td class="val1">1</td> to this: <td><input class="val1" type="text" name="txt" value="1"/></td> it works fine. But thx i will check this isNan().

Member Avatar for Taywin

Oh OK. Nope, it is not the correct format then. The reason is that you change from element of table cell to be a nested input tag inside the table cell. In other words, you add a new element (child node) to the table cell instead of changing the tag. The JQuery is looking at an element named 'val2' but could not find it because the input tag is not a direct child to your table txtMult. Then you attempt to call val() from the unidentified object, so it returns NaN because it is not a number but an object.

Sorry that I can't give you the script because I don't use JQuery. I can only give you what to look for. What you need to look for in JQuery is to access its children node of input tag.

PS: Your original script has misplaced closing double quotations by the way.

Edited by Taywin
Member Avatar for Bachu

Try this

<!DOCTYPE HTML>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

        </head>
        <body>
        <table>
        <tr>
            <th>Cost</th>
            <th>Quantity</th>
            <th>Sub-Total</th>
        </tr>
        <tr class="txtMult">
        <td class="val1">1</td>
        <td><input class="val2" type="text" name="txt"/></td>
        <td><span class="sum">0</span></td>
        </tr>
        <tr class="txtMult">
        <td class="val1">2</td>
        <td><input class="val2" type="text" name="txt"/></td>
        <td><span class="sum">0</span></td>
        </tr>
        <tr>
        <td align="right" colspan="2"><strong>Total</strong></td>
        <td class="total">0</td>
        </tr>
        </table>


        <script type="text/javascript">
        $(function(){

            function getTotal() {
                var total=0;
                $(".sum").each(function() {
                    total = total + parseFloat($(this).html());
                });
                return  parseFloat(total);
            }

            $('.val2').live('keyup', function() {
                var cost = parseFloat($(this).closest('tr').find('.val1').html());
                var quantity = parseFloat($(this).closest('tr').find('.val2').val());
                if(quantity)    var quantity = quantity;
                else quantity =0;
                var sum = parseFloat(cost * quantity);
                $(this).closest('tr').find('.sum').html(sum);
                $('.total').html(getTotal);
            });

        });
        </script>

        </body>
        </html>
Edited by Bachu
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.