Javascript -计算两个相关字段之间的剩余部分

Javascript - calculating the remaining between two related fields

本文关键字：字段 之间 剩余部分 两个 计算 Javascript      更新时间：2023-09-26

首先，我想计算表单中两个字段之间的剩余QTY(数量);换句话说，我有实际QTY输入文本字段作为只读，其值是从mysql表中获得的，并且有用户QTY输入文本字段是从用户输入中获取的。我想要的只是根据用户在用户QTY中输入的内容减少实际QTY。

我有如下代码:

$query2 = "SELECT * from store_00";
$result2 = mysql_query($query2);
$n = array();
while($row2 = mysql_fetch_assoc($result2)){
echo "<td align=center>".$row2['item_no']."</td><td align=center>";
?>
<input type="text" id="fname" value="<?php echo $row2['qty'] ?>" readonly="readonly"/>
<?php
echo "</td>";
for($i=0;$i<$num;$i++){
echo "<td align=center>"; ?><input autofocus="autofocus" onchange="myFunction(this.value);" type="text" name="n[]" value=""/><?php echo "</td>";
}
echo "</tr>";
}

和Javascript代码:

function myFunction(v)
{
var x=document.getElementById("fname");
x.value = x.value - v;
}

上面将第一次正确地输出实际QTY，但是当用户将值更改回0时，它将从新的实际QTY值中递减，从而给出假剩余…因此，必须有一种方法来保存一个临时的实际QTY值。

无论如何我知道代码看起来很糟糕，我仍然是JS的新手，不知道如何在两个字段之间创建一个简单的关系和剩余的计算。

当你不使用jQuery和你的问题是关于javascript，我已经改变了一些事情做你想要的很容易。此外，id应该是唯一的，而类不需要是唯一的。正如您所述，由于具有相同值的id会产生问题，因此您没有存储原始值，这是您的主要问题。有很多方法，但我更喜欢这个，因为我想它很容易理解。

$n = array();
echo "<table>";
while($row2 = mysql_fetch_assoc($result2)){
    echo "<tr class='inputs'>";
    echo "<td align=center> ".$row2['item_no']." </td><td align=center>";
    echo "<input class='original' type='text' id='c".$row2['item_no']."' value='".$row2['qty']."' readonly='readonly'/>";
    echo "</td>";
    for($i=0;$i<$num;$i++){
        echo "<td align=center>";
        echo "<input class='d".$row2['item_no']."'  data-goto='c".$row2['item_no']."' data-original = '".$row2['qty']."' autofocus='autofocus' onchange='myFunction(this);' type='text' name='n[]' value='0'/>";
        echo "</td>";
    }
    echo "</tr>";
}
echo "</table>";

使用html5，您可以使用data-前缀定义自定义标记，并且可以使用该对象的getAttribute方法访问它们。

<script>  
    function myFunction(v){
        var minus = 0;
        var mutualInputs = document.getElementsByClassName(v.className);
        for (var i = 0; i < mutualInputs.length; ++i) {
            var item = mutualInputs[i];  
            minus = minus + parseInt(item.value);
        }
        var original = v.getAttribute('data-original');
        var x = document.getElementById(v.getAttribute('data-goto'));
        x.value = original - minus;
    }
</script>

ps:你的item_no在这个例子中必须是唯一的

相关文章：