Question

我有一张表，其中有一行数量，价格和总数当我提供数量和价格时，总数会自动生成...

我有另一个函数，它在前一行附加一个空行。但问题是之前的总数也来了。我如何识别单独的行并根据具体行更改值？

这是我的代码..

Jquery的

$(document).ready(function(){
    $("#quant, #prc").blur(function(){
        var quants = $("#quant").val();
        var prc = $("#prc").val();
        var tot_field = $("#tot").val();
        var tot  = quants * prc;
        $('#tot').html(tot);
    })
});

HTML

    <table>
        <tr>
            <td>
                <input id="quant" class="orderquan" value="0" type="text" />
            </td>

        <td id="mrp">
                <input id="prc" class="orderinput" value="0" type="text" />
            </td>

            <td>
               <span id="tot" class="orderquan"></span>
        </td>
            </tr>
</table>

通过这样做只有第一行工作正常但其他人没有..我必须添加一些与每行相关的索引，但我不知道该怎么做...

Answer 1

将您的ID更改为类：

<table>
    <tr>
        <td>
            <input class="quant orderquan" value="0" type="text" />
        </td>
        <td class="mrp">
            <input class="prc orderinput" value="0" type="text" />
        </td>
        <td> <span class="tot orderquan"></span>

        </td>
    </tr>
</table>

然后使用jQuery DOM遍历函数在表的同一行中查找输入和输出字段：

$(function() {
    $("table").on("blur", ".orderquan, .orderinput", function() {
        var row = $(this).closest("tr");
        var quants = row.find(".quant").val();
        var prc = row.find(".prc").val();
        var tot = quants * prc;
        row.find(".tot").text(tot);
    });
});

您还需要使用.on委托将处理程序绑定到动态创建的元素。

DEMO

更改特定的td值

1 个答案: