Question

我想将对值执行的计算限制在特定行。我该如何实现呢？

标记

<table id="nytakstside1tomt">
    <theader>
        <tr>
            <td class="captioncenter">m²</td>
            <td class="captioncenter">m²-pris</td>
            <td class="captioncenter">Seksjonering</td>
            <td class="captioncenter">Sjablon</td>
            <td class="captioncenter"></td>
        </tr>
    </theader>
    <tbody id="tbody_target1">
        <tr>
            <td class="center">
                <input name="m2" class="m2side1" type="number" style="width:60px !important;" />
            </td>
            <td class="center">
                <input name="m2pris" class="m2prisside1" type="number" style="width:75px !important;" />
            </td>
            <td>
                <input name="seksjoneringteller" class="seksjoneringtellerside1" type="number" value="1" style="width:60px !important;" />/
                <input name="seksjoneringnevner" class="seksjoneringnevnerside1" type="number" value="1" style="width:60px !important;" />
            </td>
            <td class="center">
                 <output name="sjablon" class="sjablonside1"></output>
            </td>
            <td class="center">&nbsp;</td>
        </tr>
        <tr>
            <td class="center">
                <input name="m22" class="m2side1" type="number" style="width:60px !important;" />
            </td>
            <td class="center">
                 <input name="m2pris2" class="m2prisside1" type="number" style="width:75px !important;" />
            </td>
            <td>
                <input name="seksjoneringteller2" class="seksjoneringtellerside1" type="number" value="1" style="width:60px !important;" />/
                <input name="seksjoneringnevner2" class="seksjoneringnevnerside1" type="number" value="1" style="width:60px !important;" />
            </td>
            <td class="center">
                 <output name="sjablon2" class="sjablonside1"></output>
            </td>
            <td class="center">&nbsp;</td>
        </tr>
        <tr>
            <td class="center">
                 <input name="m23" class="m2side1" type="number" style="width:60px !important;" />
            </td>
            <td class="center">
                <input name="m2pris3" class="m2prisside1" type="number" style="width:75px !important;" />
            </td>
            <td>
                <input name="seksjoneringteller3" class="seksjoneringtellerside1" type="number" value="1" style="width:60px !important;" />/
                <input name="seksjoneringnevner3" class="seksjoneringnevnerside1" type="number" value="1" style="width:60px !important;" />
            </td>
            <td class="center">
                <output name="sjablon3" class="sjablonside1"></output>
            </td>
            <td class="center">&nbsp;</td>
        </tr>
    </tbody>
</table>

JS

$(document).on('keyup blur paste',
    '.m2side1, .m2prisside1, .seksjoneringtellerside1, .seksjoneringnevnerside1', function () {
    var m2 = $(".m2side1").val();
    var m2pris = $(".m2prisside1").val();
    var teller = $(".seksjoneringtellerside1").val();
    var nevner = $(".seksjoneringnevnerside1").val();
    var str = (m2 * m2pris) / nevner * teller;
   // str = parseInt(str).toLocaleString(); //tusendelsskilletegn
    $(".sjablonside1").html(str);
});

fiddle

Answer 1

您需要将closest() tr元素添加到引发事件的输入中，并将每个输入框的选择器限制为该行，请尝试以下操作：

$(document).on('keyup blur paste', '.m2side1, .m2prisside1, .seksjoneringtellerside1, .seksjoneringnevnerside1', function () {
    var $row = $(this).closest('tr');
    var m2 = $(".m2side1", $row).val();
    var m2pris = $(".m2prisside1", $row).val();
    var teller = $(".seksjoneringtellerside1", $row).val();
    var nevner = $(".seksjoneringnevnerside1", $row).val();
    var str = (m2 * m2pris) / nevner * teller;
    // str = parseInt(str).toLocaleString(); //tusendelsskilletegn
    $(".sjablonside1", $row).html(str);
});

Updated fiddle

计算应该局限于具体的行，怎么样？

1 个答案: