[英]how to add array values in text box
我有三個作為數組指定的文本框,我想添加兩個文本框並在第三個文本框中獲得結果,如下所示。
<tbody>
<?php
$i=1;
foreach ($sub as $row)
{
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark" onclick="add_number()"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
我使用了以下腳本及其運行,但在第一個循環中獲得了結果
<script type="text/javascript">
function add_number() {
var first_number = parseInt(document.getElementById("mark1").value);
var second_number = parseInt(document.getElementById("mark2").value);
var result = first_number + second_number;
document.getElementById("totmark").value = result;
}
</script>
請幫助我們獲得答案
問題是每次迭代的重復ID(mark1,mar2,mark1,mark2等)。 函數getElementById
返回第一個元素。
一種替代方法是使用函數closest('tr')
,然后按名稱[name="mark-1[]"]
和[name="mark-2[]"]
查找。 然后使用此.querySelector('[name="total-mark[]"]')
查找字段以存儲結果。
最后,使用功能addEventListener
可以將事件單擊綁定到整個元素[name="total-mark[]"]
。
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) { elem.addEventListener('click', add_number); }); function add_number() { var tr = this.closest('tr'); var first_number = tr.querySelector('[name="mark-1[]"]').value; var second_number = tr.querySelector('[name="mark-2[]"]').value; var result = Number(first_number) + Number(second_number); this.value = result; }
<table> <tbody> <tr> <td><input type="text" name="mark-1[]" value="" ></td> <td><input type="text" name="mark-2[]" value="" ></td> <td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> <tr> <td><input type="text" name="mark-1[]" value="" ></td> <td><input type="text" name="mark-2[]" value="" ></td> <td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> </tbody> </table>
建議使用PHP變量$i
的當前索引,並向每個字段添加特定的ID,這樣您就可以直接獲取元素。 例如,這兩個字段將具有以下ID: mark-1-1[]
, mark-1-2[]
和mark-2-1[]
, mark-2-2[]
等。
此方法使用屬性dataset
。
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) { elem.addEventListener('click', add_number); }); function add_number() { var field = this.dataset.field; var first_number = document.getElementById('mark-1-' + field + '[]').value; var second_number = document.getElementById('mark-2-' + field + '[]').value; var result = Number(first_number) + Number(second_number); this.value = result; }
<table> <tbody> <tr> <td><input type="text" id="mark-1-1[]" value="" ></td> <td><input type="text" id="mark-2-1[]" value="" ></td> <td><input type="text" data-field='1' name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> <tr> <td><input type="text" id="mark-1-2[]" value="" ></td> <td><input type="text" id="mark-2-2[]" value="" ></td> <td><input type="text" data-field='2' name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> </tbody> </table>
HTML
<tbody>
<?php
$i=1;
$k=1;
foreach ($sub as $row)
{ $k++;
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1-<?php echo $k;?>"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2-<?php echo $k;?>"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark-<?php echo $k;?>" onclick="add_number(<?php echo $k;?>)"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
腳本
<script type="text/javascript">
function add_number(k) {
var first_number = parseInt(document.getElementById("mark1-"+k).value);
var second_number = parseInt(document.getElementById("mark2-"+k).value);
var result = first_number + second_number;
document.getElementById("totmark-"+k).value = result;
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.