无法获取最接近的上一td输入的值

Question

I need your help!

I have fiddle and what I want is multiplicate two td's values and the result go to the next td.

$(document).ready(function(){
$( "input[id^='unitval']" ).keyup(function() { 

var input_value = parseFloat($(this).val());
var Cant = $("#item_Cant").text(); 
var totval = (input_value * Cant);

    if (!isNaN(input_value)) { // the input is a number
    //$("#totval1").val(totval); // update second field
         $(this).closest('td').next().find('input').val(totval);

    } else { // the input wasn't a number
        $("#totval1").val("not a number?"); // show an error mesage
    }
});
});

But just works with the first row because the second one still multiplicating with the td of first row not the actual td

I tried to change the:

 var Cant = $("#item_Cant").text(); 

with

var Cant = $("input[id^='item_Cant']").text(); 

But don't works, I have not idea why, even first row.

But in this line I need the correct Jquery for get the last td input value in the same tr.

I tried many lines but without success, hope you can understand me.

Thanks for your help.

Answer 1

You are always referring to item_Cant ID every time you do your calculation. You need to find the quantity element with respect to your current input field.

Here's one approach that'll work with your current structure:

$(document).ready(function () {
    $("input[id^='unitval']").keyup(function () {
        var input_value = parseFloat($(this).val());
        var Cant = $(this).closest('tr').find('[id^="item_Cant"]').text();
        var totval = (input_value * Cant);

        if (!isNaN(input_value)) { // the input is a number
            //$("#totval1").val(totval); // update second field
            $(this).closest('td').next().find('input').val(totval);

        } else { // the input wasn't a number
            $("#totval1").val("not a number?"); // show an error mesage
        }
    });
});

Here's a fiddle: http://fiddle.jshell.net/P89Tj/1/

Answer 2

You cannot have multiple identical ids on a page.

Use classes instead:

$(document).ready(function(){
$( "input.unitval" ).keyup(function() { 

var input_value = parseFloat($(this).val());
var Cant = $(this).parent().prev().text(); 
var totval = (input_value * Cant);

    if (!isNaN(input_value)) { // the input is a number
    //$("#totval1").val(totval); // update second field
         $(this).parent().parent().find('.totval').val(totval);

    } else { // the input wasn't a number
        $("#totval1").val("not a number?"); // show an error mesage
    }
});
});

<table width="500" border="1">
    <tr>
        <td>Quantity</td>
        <td>VAL1</td>
        <td>RESULT Quantity*VAL1</td>
        <td>VAL2</td>
        <td>RESULT Quantity*VAL2</td>
    </tr>
    <tr>
        <td>5</td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
    </tr>
    <tr>
        <td>4</td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
        <td><input class="unitval" type="text"/></td>
        <td><input readonly class="totval"  type="text"/></td>
    </tr>

</table>

http://fiddle.jshell.net/8CGXf/