如何在文本框中添加数组值

Question

我有三个作为数组给出的文本框，我想添加两个文本框并在第三个文本框中得到结果，如下所示。

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

请帮助我们得到答案

Answer 1

问题是每次迭代的重复 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>

Answer 2

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>

如何在文本框中添加数组值

how to add array values in text box

javascript

arrays

codeigniter-2