如何通过单击按钮调用 JavaScript 函数并在循环文本框中执行操作？

Question

我是 javascript 新手，我想知道如何通过单击按钮对表格中的每行执行一些数学运算。

“变量”列中的文本框是由 while 循环创建的，我想对两个值进行迭代操作，一个值来自数组中的第一个文本框（变量 1），另一个来自第二个文本框（变量2) 所以我需要根据按钮对这两个数字求和或相减。

如何让javascript函数通过点击按钮来调用它？

在我的示例中，我有一个“案例语句”从我的表中获取 id “操作”，如果 id 为 1 则必须求和，2 则必须求和 减法，3它必须做一个乘法。

例如我有三行：

---

1. Indicador 1 = 变量 1 + 变量 2 ---> 点击按钮 ----> 显示求和结果。
2. Indicador 2 = 变量 3 - 变量 4 ---> 点击按钮 ----> 显示减法的结果。
3. Indicador 3 = 变量 5 * 变量 6 ---> 点击按钮 ----> 显示乘法结果。

等等

你可以看到我的桌子。

如果我错过了什么，请告诉我。

此代码显示上表。

        <form action="ingreso-datos-exe.php" method="post"> 
              <input type="hidden" value="<?php echo $iduser;?>"  name="iduser"/>
         <table id="tabla-registros" class="table table-striped table-bordered responsive">
   <thead>
        <tr>
         <th>Indicador</th>
          <th>Variables</th>
           <th>Result</th>
          <th>Compute Operation</th>
          </tr>
          </thead>
          <tbody>



        <?php

        //to get the indicator's name in the first column of the table

        while($r = mysql_fetch_assoc($checkSQL)) {
                $id_indicador= $r['id_indicador'];
                $nombre= $r['nombre_indicador'];
                $id_calculo= $r['id_calculo'];
                echo $id_indicador.$nombre.'</br>'; ?>

        <td><?php echo $id_indicador.$nombre;?></td><td>
          <table>
         <tr>

        <?php   

            // To get the variable's name in the second column of the table     
            while($r2 = mysql_fetch_assoc($checkSQL2)) {
                $nombre_variable= $r2['nombre_variable_medicion'];
                $idvariable= $r2['id_variablemedicion'];
                //  var_dump($r2);
                                             ?>

    <th><?php echo $nombre_variable;?></th>
    <td width=60px><input type="text" value="" class="price" name="valor[<?php echo $idvariable; ?>]"/></td> 

    <input type="hidden" value="<?php echo $id_indicador;?>"  name="id_indicador[<?php echo $idvariable; ?>]"/>
   <input type="hidden" value="<?php echo $idvariable;?>"  name="id_variable[<?php echo $idvariable; ?>]"/>

      <?php     } ?>


                        </tr>
                        <tr>

           </tr> 

          </table>

  <?php switch($id_calculo){ 

                            case '1':?>
                                <td><input class="btn btn-success" type="button" name="btnSum" value="Sum"    OnClick="fncSum();"></td>


                           <?php  break; ?>


                          <?php case '2':?>
                          <td><input class="btn btn-success" type="button" name="btnSum" value="substract" OnClick="fncSum();"></td>


                           <?php  break; ?>

                          <?php case '3':?>
                         <td><input class="btn btn-success" type="button" name="btnSum" value="multiplication" OnClick="fncSum();"></td>


                          <?php  break;
                           } ?>
                           <?php    echo '</td>'.'</tr>';
                          }
                                ?>                  



</tbody>

</table>


        </form> 

Answer 1

//returns parent row for the button
function getRow(el) {
    var row = el.parentNode.parentNode;
    return row;
}

//returns number from val1
function getVal1(row) {
    return +row.querySelector(".val1").value || 0
}

//returns number from val2
function getVal2(row) {
    return +row.querySelector(".val2").value || 0
}


//sets result
function setResult(row, val) {
    row.querySelector(".result").value = val
}

//do action
//reads action from the data-action attribute
function action() {
    var a = this.getAttribute("data-action");
    var row = getRow(this);
    var val1 = getVal1(row);
    var val2 = getVal2(row);
    var res = 0;
    switch (a) {
        case "sum":
            res = val1 + val2;
            break;
        case "substract":
            res = val1 - val2;
            break;
        case "multiplication":
            res = val1 * val2;
            break;
        default:
            throw new Error("Unknown action '"+a+"'");
    }
    setResult(row, res);
}

//adds click event for each btn-action elements after document loaded
window.addEventListener("load", function () {
    var btns = document.querySelectorAll(".btn-action");
    for (var i=0; i<btns.length; i++) {
        var btn = btns[i];
        btn.addEventListener("click", action);
    }
})

<table>
    <tr>
        <td>Item 1</td>
        <td><input class="val1"/></td>
        <td><input class="val2" /></td>
        <td><input class="result" /></td>
        <td><input type="button" class="btn-action" value="Sum" data-action="sum"/></td>
    </tr>
    <tr>
        <td>Item 2</td>
        <td><input class="val1" /></td>
        <td><input class="val2" /></td>
        <td><input class="result" /></td>
        <td><input type="button" class="btn-action" value="Substract" data-action="substract" /></td>
    </tr>
    <tr>
        <td>Item 3</td>
        <td><input class="val1" /></td>
        <td><input class="val2" /></td>
        <td><input class="result" /></td>
        <td><input type="button" class="btn-action" value="Multiplication" data-action="multiplication" /></td>
    </tr>
</table>