gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 22:41:52 26 4
gpt4 key购买 nike

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

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

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

In my example I have a "Case statement" getting the id from my table "operations" where if the id is 1 it has to sum, 2 it has to substract, 3 it has to make a multiplication.

例如我有三行:


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

等等

你可以看到我的表格。

https://s7.postimg.org/fc88q2t23/tabla.jpg

如果我遗漏了什么,请告诉我。

此代码显示上表。

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

最佳答案

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

关于javascript - 如何通过单击按钮调用 JavaScript 函数并在循环文本框中执行操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30925167/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com