Question

我在表格中有一个多个文本框，当我在一行上设置一个事件密钥时，一个操作会将总计算为item * weight个商品，并将此值设置为选中的同一行的文本框。

在这个jquery上函数calculateBerat =＆gt; $('input[name=newBeratItem]').eq(0).val(getItemBerat);

我有些麻烦可以请你帮我解决这个问题。谢谢。

<script src="jquery.min.js"></script>
<script>
$(document).ready(function () {     
    $(".jmlItem").keyup(function () {  
        var idBarang = $(this).attr('id');
        var jmlBarang = $(this).attr('value'); 
        var beratBarang = $(this).attr('rel'); 
        var jmlBarangNew = $(this).val(); 
        calculateItem();
        calculateBerat(idBarang, jmlBarangNew, beratBarang); 
    }); 

    function calculateBerat(idBarang, jmlBarangNew, beratBarang) {  
        var ttlBerat = 0;
        var getItemBerat = jmlBarangNew * beratBarang;

        $('input[name=newBeratItem]').eq(0).val(getItemBerat); 
        //in this code, the value is only charged on the first line does not correspond to the selected row keyup event.
        //how to ensure that value is filled in the corresponding row keyup event?

        $(".newBeratItem").each(function() {                
            ttlBerat += parseFloat(this.value);                          
        });
        $("#isTotalBerat").html(ttlBerat.toFixed(2)); 
    }

    function calculateItem() { 
        var jmlItem = 0;
        //iterate through each textboxes and add the values
        $(".jmlItem").each(function() {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                jmlItem += parseFloat(this.value);
                $(this).css("background-color", "#FEFFB0");
            }
            else if (this.value.length != 0){
                $(this).css("background-color", "red");
            }            
        });       
        $("#isTotalItem").html(jmlItem.toFixed(2)); 
    } 
});
</script>
<table style="text-align:center;">
<tr>
    <td>Item</td>
    <td>Berat</td>
    <td>Harga</td>
</tr>
<tr>
    <td>
        <input type="text" id="IdBarang01" value="5" rel="0.3" class="jmlItem" size="1"/>
    </td>
    <td>
        <input type="text" id="0.3" value="0.3" class="oldBeratItem" disabled size="1" style="background-color:#A0A197;"/>
        <input type="text" name="newBeratItem" class="newBeratItem" size="1"/>
    </td>
    <td>
        <input type="text" id="5000" value="5000" class="oldHargaItem" readonly size="2" style="background-color:#A0A197;"/>
    </td>
</tr>
<tr>
    <td>
        <input type="text" id="IdBarang02" value="6" rel="0.6" class="jmlItem" size="1"/>
    </td>
    <td>
        <input type="text" id="0.6" value="0.6" class="oldBeratItem" disabled size="1" style="background-color:#A0A197;"/>
        <input type="text" name="newBeratItem" class="newBeratItem" size="1"/>
    </td>
    <td>
        <input type="text" id="10000" value="10000" class="oldHargaItem" readonly size="2" style="background-color:#A0A197;"/>
    </td>
</tr>
<tr>
    <td><div id="isTotalItem"></div></td>
    <td><div id="isTotalBerat"></div></td>
    <td><div id="isTotalHarga"></div></td>
</tr>
</table>

Answer 1

您需要找到closest父tr并找到所需的input并使用val()设置值，如下所示，

function calculateBerat(idBarang, jmlBarangNew, beratBarang) {  
        var ttlBerat = 0;
        var getItemBerat = jmlBarangNew * beratBarang;

        $("#"+idBarang).closest("tr").find('input[name=newBeratItem]').val(getItemBerat); 
        //in this code, the value is only charged on the first line does not correspond to the selected row keyup event.
        //how to ensure that value is filled in the corresponding row keyup event?

        $(".newBeratItem").each(function() {                
            ttlBerat += parseFloat(this.value);                          
        });
        $("#isTotalBerat").html(ttlBerat.toFixed(2)); 
    }

如何在使用jquery选择的行上的多个文本框事件键盘中将值设置为文本框

1 个答案: