Jquery 计算多个单独行的乘积_Jquery_Html

Jquery 计算多个单独行的乘积

jquery html

Jquery 计算多个单独行的乘积,jquery,html,Jquery,Html,问题: 在第一行下面添加的任何行都会给出第一行的乘积下面提到的HTML有一个jQuery脚本，它计算表行输入字段的两个值的乘积。第一行之后的多行也面临相同的问题注意：这不是我的全部文件，只是我面临问题的部分 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script

问题: 在第一行下面添加的任何行都会给出第一行的乘积

下面提到的HTML有一个jQuery脚本，它计算表行输入字段的两个值的乘积。第一行之后的多行也面临相同的问题

注意：这不是我的全部文件，只是我面临问题的部分

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){


                $('.calc').on("keypress", function(e) {
                /* ENTER PRESSED*/
                    if (e.keyCode == 13) {
                        var ptag4 = 1;
                        var ptag1 = $(this).find('td.ryo input').val();
                        var ptag2 = $(this).find('td.qty input').val();
                        $(this).append(ptag4 + "," + ptag1 + "," + ptag2 + ", ");
                        var ptag3 = ptag1*ptag2;
                        //troubleshoot value fetch
                        $(this).find('td:nth-child(4)').html(ptag3);
                    }
                });
            });
        </script>
    </head>

    <body>




    <table class="calc">
        <tbody><tr class="ka">
            <th>Kōmoku-mei</th>
            <th>Kakaku</th>
            <th>Ryō</th>
            <th>Gōkei</th>
        </tr>
        <tr class="ka">
            <td class="kom">
                Gom Kōmoku
            </td>
            <td class="ryo">
                <input readonly="readonly" type="text" name="val1" value="23">
            </td>
            <td class="qty">
                <input class="kin" type="text" name="val1" value="1">
            </td>
            <td class="gokei">
                276
            </td>
            <td class="closeb">
                X
            </td>
        </tr>
        <tr class="ka">
            <td class="kom">
                Gom Kōmoku
            </td>
            <td class="ryo">
                <input readonly="readonly" type="text" name="val1" value="23">
            </td>
            <td class="qty">
                <input class="kin" type="text" name="val1" value="1">
            </td>
            <td class="gokei">
                276
            </td>
            <td class="closeb">
                X
            </td>
        </tr>
    </table>
    </body>


$（文档）.ready（函数（）{
$（'.calc'）。打开（“按键”，函数（e）{
/*按回车键*/
如果（e.keyCode==13）{
var ptag4=1；
var ptag1=$（this.find（'td.ryo input'）.val（）；
var ptag2=$（this.find（'td.qty input'）.val（）；
追加（ptag4+”、“+ptag1+”、“+ptag2+”、”）；
变量ptag3=ptag1*ptag2；
//值获取疑难解答
$（this.find（'td:nth child（4）'））.html（ptag3）；
}
});
});
克莫库美
卡卡库
瑞ō
盖基
甘木库
276
X
甘木库
276
X

我想问题出在您的选择器上。它总是提供前两个输入框。通过使用

.closest（）

选择器解决此问题的多种方法之一。使用“最接近”可以获得最接近的文本框

查找有关

.closesst

的更多详细信息：

好吧，试试这个。不要硬编码访问元素的方法。这有时会让生活变得困难。只要玩一下

事件

，你就可以为这个项目做你想做的一切

$（文档）.ready（函数（）{
$（'.calc'）。打开（“按键”，函数（e）{
/*按回车键*/
如果（e.keyCode==13）{
var ptag4=1；
var ptag1=$（e.target）.parent（）.prev（）.find（“input”）.val（）；
var ptag2=$（e.target）.val（）；
追加（ptag4+”、“+ptag1+”、“+ptag2+”、”）；
变量ptag3=ptag1*ptag2；
//值获取疑难解答
$（e.target）.parent（）.next（）.html（ptag3）；
}
});
});

克莫库美
卡卡库
瑞ō
盖基
甘木库
276
X
甘木库
276
X
甘木库
276
X
您检查过答案了吗谢谢！不知道e.target。很高兴知道这是否有帮助：）