无法获得最接近的prev td输入值

时间:2014-07-10 22:43:46

标签: javascript jquery html

我需要你的帮助!

我有fiddle,我想要的是将两个td的值相乘,结果将转到下一个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
    }
});
});

但是只能使用第一行,因为第二行仍然乘以第一行的td而不是实际的td

我试图改变:

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

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

但是不行,我不知道为什么,甚至第一排。

但是在这一行中,我需要正确的Jquery来获取同一tr中的最后一个td输入值。

我试了很多行,但没有成功,希望你能理解我。

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

每次进行计算时,您总是指item_Cant ID。您需要找到与当前输入字段相关的数量元素。

这是一种适用于您当前结构的方法:

$(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
        }
    });
});

这是一个小提琴:http://fiddle.jshell.net/P89Tj/1/

答案 1 :(得分:1)

页面上不能有多个相同的ID。

改用类:

$(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/