Question

当我在第4个输入上输入一些数字时。它会自动计算最后两个输入中的值。对于这些单独的行，我使用了两个单独的函数。我该如何使用适用于两者的单一功能？

function myFunction() {
	var b = document.getElementById('b').value;
	var d = document.getElementById('d').value;
    var e = document.getElementById("e").value;
    var f = document.getElementById('f').value = (d*e).toFixed(3);
	var g = document.getElementById('g').value = (f*b).toFixed(3);   
}

function myFunction1() {
	var b = document.getElementById('b1').value;
	var d = document.getElementById('d1').value;
    var e = document.getElementById("e1").value;
    var f = document.getElementById('f1').value = (d*e).toFixed(3);
	var g = document.getElementById('g1').value = (f*b).toFixed(3);   
}

<table border="1" style="border-collapse:collapse;">
    <tr>
        <td>Produto</td>
        <td style="display: none;"></td>
        <td>Diluição</td>
        <td>Necessario de produto para limpar 1m2</td>
        <td>Metragem do ambiente a ser limpo</td>
        <td>Resultado em litros de produto concentrado para limpar a metragem do cliente</td>
        <td colspan="2">Quantidade de solução  em litros</td>	
    </tr>

    <tr>
        <td colspan="7" style="text-align: center;">CONCENTRADOS- LINHA CONC</td>
    </tr>

    <tr>
        <td rowspan="3">Concentrax Desinfetante</td>
        <td><input id="b" type="text" name="" value="15" disabled></td>
        <td><input id="c" type="text" name="" value="1/15" disabled> </td>
        <td><input id="d" type="text" name="" value="0.011" disabled> </td>
        <td><input id="e" type="text" name="" value="0" oninput="myFunction()"></td>
        <td><input id="f" type="text" name="" value="0.00"></td>
        <td><input id="g" type="text" name="" value="0.00"> </td>
    </tr>

    <tr>
        <td><input id="b1" type="text" name="" value="200" disabled></td>
        <td><input id="c1" type="text" name="" value="1/200" disabled> </td>
        <td><input id="d1" type="text" name="" value="0.00083" disabled> </td>
        <td ><input id="e1" type="text" name="" value="0" oninput="myFunction1()"></td>
        <td><input id="f1" type="text" name="" value="0.00"></td>
        <td><input id="g1" type="text" name="" value="0.00"> </td>
    </tr>
</table>

Answer 1

或者，如果您想要一种可扩展的方法：

function myFunction(suffix) {
  var b = document.getElementById('b' + suffix).value;
  var d = document.getElementById('d' + suffix).value;
  var e = document.getElementById("e" + suffix).value;
  var f = document.getElementById('f' + suffix).value = (d*e).toFixed(3);
  var g = document.getElementById('g' + suffix).value = (f*b).toFixed(3);   
}

然后在第一行中使用myFunction（''）对其进行调用，然后在第二行中使用myFunction（'1'）进行调用。

Answer 2

function myFunction(id) {
 if(id == "firstRow"){
    var b = document.getElementById('b').value;
    var d = document.getElementById('d').value;
    var e = document.getElementById("e").value;
    var f = document.getElementById('f').value = (d*e).toFixed(3);
    var g = document.getElementById('g').value = (f*b).toFixed(3);   
 }else if(id == "secondRow"){
    var b = document.getElementById('b1').value;
    var d = document.getElementById('d1').value;
    var e = document.getElementById("e1").value;
    var f = document.getElementById('f1').value = (d*e).toFixed(3);
    var g = document.getElementById('g1').value = (f*b).toFixed(3);   
 }
}

HTML

<tr>
    <td rowspan="3">Concentrax Desinfetante</td>
    <td><input id="b" type="text" name="" value="15" disabled></td>
    <td><input id="c" type="text" name="" value="1/15" disabled> </td>
    <td><input id="d" type="text" name="" value="0.011" disabled> </td>
    <td><input id="e" type="text" name="" value="0" oninput="myFunction('firstRow')"></td>
    <td><input id="f" type="text" name="" value="0.00"></td>
    <td><input id="g" type="text" name="" value="0.00"> </td>
</tr>

<tr>
    <td><input id="b1" type="text" name="" value="200" disabled></td>
    <td><input id="c1" type="text" name="" value="1/200" disabled> </td>
    <td><input id="d1" type="text" name="" value="0.00083" disabled> </td>
    <td ><input id="e1" type="text" name="" value="0" oninput="myFunction('secondRow')"></td>
    <td><input id="f1" type="text" name="" value="0.00"></td>
    <td><input id="g1" type="text" name="" value="0.00"> </td>

工作码笔

https://codepen.io/anon/pen/dKwWvW

如何为两个行使用单个函数来计算值？

2 个答案: