Question

我正在尝试从（目标 - 当前）计算差距的结果，以了解每个能力差距的结果。所有Compentencies都有不同的目标，我编写这个JavaScript函数来计算差距的结果：

＆＃13;

function targetCA() {
  var target = parseInt(document.getElementById("targ_a").value);
  var current = parseInt(document.getElementById("curre_a").value);

  var total = current - target;

  document.getElementById('gap_a').value = total;


}

＆＃13;

<table border='1'>
  <tr>
    <td>Compentency</td>
    <td>Target</td>
    <td>Current</td>
    <td>Gap</td>
  </tr>
  <tr>
    <td>Operating Computer</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" id="targ_a" onchange="targetCA();" value="" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" id="curre_a" class="curre_a" onchange="targetCA();" value="" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" id="gap_a" class="gap_a" value="0">
    </td>
  </tr>
  <tr>
    <td>Operating Microsoft Excel</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" id="targ_a" value="" onchange="targetCA();" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" id="curre_a" class="curre_a" onchange="targetCA();" value="" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" id="gap_a" class="gap_a" value="0">
    </td>
  </tr>
</table>

＆＃13;

但是只计算第一行时可以计算。

我不知道如何正确计算每一行。

我不知道如何使用javascript计算输入类型数组。

也许有人可以帮我解决这个问题。非常感谢

Answer 1

问题是你有相同的id s元素。 ID应该是唯一的。如果您有重复的ID，它将始终获取具有必要ID的第一个元素。

相反，尝试基于行解析。传递行号，然后使用name或class属性获取必要的元素。

function targetCA(rowNumber) {
  var table = document.getElementById('tblData');
  var row = table.querySelectorAll('tr')[rowNumber];

  var target = parseInt(row.querySelector("input[name='targ_a[]']").value || 0);
  var current = parseInt(row.querySelector("input[name='curre_a[]']").value || 0);

  var total = current - target;

  row.querySelector('input[name="gap_a[]"]').value = total;


}

<table border='1' id='tblData'>
  <tr>
    <td>Compentency</td>
    <td>Target</td>
    <td>Current</td>
    <td>Gap</td>
  </tr>
  <tr>
    <td>Operating Computer</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" id="targ_a" onchange="targetCA(1);" value="" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" id="curre_a" class="curre_a" onchange="targetCA(1);" value="" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" id="gap_a" class="gap_a" value="0">
    </td>
  </tr>
  <tr>
    <td>Operating Microsoft Excel</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" id="targ_a" value="" onchange="targetCA(2);" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" id="curre_a" class="curre_a" onchange="targetCA(2);" value="" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" id="gap_a" class="gap_a" value="0">
    </td>
  </tr>
</table>

替代方法

创建一个动态注册事件的init函数。
导航到父tr
获取输入并执行计算

function targetCA() {
  var row = this.parentNode.parentNode;

  var target = parseInt(row.querySelector("input[name='targ_a[]']").value || 0);
  var current = parseInt(row.querySelector("input[name='curre_a[]']").value || 0);

  var total = current - target;

  row.querySelector('input[name="gap_a[]"]').value = total;
}

function registerEvents() {
  var inputs = document.querySelectorAll('#tblData input[type="number"]');
  
  for(var i = 0; i< inputs.length; i++) {
    inputs[i].addEventListener('change', targetCA)
  }
}

registerEvents();

<table border='1' id='tblData'>
  <tr>
    <td>Compentency</td>
    <td>Target</td>
    <td>Current</td>
    <td>Gap</td>
  </tr>
  <tr>
    <td>Operating Computer</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" class="curre_a" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" class="gap_a" value="0">
    </td>
  </tr>
  <tr>
    <td>Operating Microsoft Excel</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" class="curre_a" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" class="gap_a" value="0">
    </td>
  </tr>
</table>

Answer 2

首先，你做错了是你为不同的元素定义了相同的精确id。 Ids意味着独特。如果你定义了deffierent id，那么在你的方法中使用它们应该没问题。

像这样：

<table border='1'>
  <tr>
    <td>Compentency</td>
    <td>Target</td>
    <td>Current</td>
    <td>Gap</td>
  </tr>
  <tr>
    <td>Operating Computer</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" id="targ_a" onchange="targetCA();" value="" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" id="curre_a" class="curre_a" onchange="targetCA();" value="" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" id="gap_a" class="gap_a" value="0">
    </td>
  </tr>
  <tr>
    <td>Operating Microsoft Excel</td>
    <td>
      <input type="number" class="targ_a" name="targ_a[]" id="targ_b" value="" onchange="targetCA();" placeholder="0">
    </td>

    <td>
      <input type="number" name="curre_a[]" id="curre_b" class="curre_a" onchange="targetCA();" value="" placeholder="0">
    </td>

    <td>
      <input type="text" name="gap_a[]" id="gap_b" class="gap_a" value="0">
    </td>
  </tr>
</table>

JS：

function targetCA() {

  var charArray = ['a','b'];

  for (var i=0; i<charArray.length;i++){


    var target = parseInt(document.getElementById("targ_"+charArray[i]).value);
    var current = parseInt(document.getElementById("curre_"+charArray[i]).value);

    var total = current - target;

    document.getElementById('gap_'+charArray[i]).value = total;

  }


}

如何在PHP中使用Javascript设置值输入文本数组

2 个答案: