Question

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

列中的文本框＆＃34;变量＆＃34;是由while循环创建的，我想从数组中的第一个文本框（变量1）中的两个值迭代一个值，另一个从第二个变量（变量2）迭代，所以我需要对两个值求和或减去两个值数字取决于按钮。

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

在我的例子中，我有一个＆＃34;案例陈述＆＃34;从我的桌子获取id ＆＃34;操作＆＃34;如果id为1则必须求和，2必须求和 substract，3它必须进行乘法运算。

例如我有三行：

指标1 =变量1 +变量2 ---＆gt;点击按钮----＆gt;显示总和的结果。
指标2 =变量3 - 变量4 ---＆gt;点击按钮----＆gt;显示减法的结果。
指标3 =变量5 *变量6 ---＆gt;点击按钮----＆gt;显示乘法的结果。

等等

你可以看到我的表格。

如果我错过了某些内容，请告诉我。

此代码显示上表。

        <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

＆＃13;

//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);
    }
})

＆＃13;

<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>

＆＃13;

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

1 个答案: