使用javascript计算平均值的简单方法

Question

我有一个表格，其中必须插入一些输入以计算某些数字的平均值，并且必须排除空值。我几乎完成了它，但卡在中间。以下是代码：

＆＃13;

＆＃13;

function calcAvg(input_id, output_id, co_id) {
  //Get all elements with 'class="select"'
  var selects = document.getElementsByClassName(input_id);
  //Initialize vars
  var avg = 0;
  var count = 0;
  //Calculate average
  for (var i = 0; i < selects.length; i++) {
    if (selects[i].value != "") {
      count++;
      avg += Number(selects[i].value);
      //Alert for debugging purposes
      //alert(selects[i].value+" "+avg);
    }
  }
  avg = avg / count;
  //Output average
  document.getElementById(output_id).value = avg;
}

＆＃13;

<table>
  <tr>
    <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
    </td>
  </tr>
  <tr>
    <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
    <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    <td height="34" colspan="11" align="center">MODULE CO</td>
  </tr>
  <tr>
    <td width="7%" align="center">PO1</td>
    <td width="7%" align="center">PO2</td>
    <td width="7%" align="center">CO AVERAGES</td>
  </tr>
  <tr>
    <td height="71" align="center">MATHEMATICS</td>
    <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calc_co1');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calc_co1');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co1" id="calc_co1" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr>
    <td height="71" align="center">SCIENCE</td>
    <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calc_co2');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calc_co2');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co2" id="calc_co2" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr bgcolor="#9999CC">
    <td height="71" align="center">PO AVERAGES</td>
    <td align="center"><input type="text" name="Avg" id="calculation1" readonly style="width:60px">&nbsp;</td>
    <td align="center"><input type="text" name="Avg1" id="calculation2" readonly style="width:60px">&nbsp;</td>
  </tr>

</table>

＆＃13;

＆＃13;

＆＃13;

我必须垂直和水平计算平均值。我已经水平计算但卡在垂直计算中。逻辑是 - 插入垂直位置的值将是相同的。我知道平均值将与输入值相同，但我必须在文本框中显示它。如果有任何方法可以垂直计算...这里也应排除空值。

Answer 1

您需要分别平均垂直和水平方向。您可以创建类来指示输入所在的行和列，然后在更改任何选择时使用它来调用calcAvg()。

我更改了选择的类名和普通框的ID，所以它更清晰一些。对于每个选择，calcAvg()被调用两次，一次用于垂直方向，一次用于水平方向。

function calcAvg(input_id, output_id) {
  //Get all elements with 'class="select"'
  var selects = document.getElementsByClassName(input_id);
  //Initialize vars
  var avg = 0;
  var count = 0;
  //Calculate average
  for (var i = 0; i < selects.length; i++) {
    if (selects[i].value != "") {
      count++;
      avg += Number(selects[i].value);
      //Alert for debugging purposes
      //alert(selects[i].value+" "+avg);
    }
  }
  avg = avg / count;
  //Output average
  document.getElementById(output_id).value = avg;
}

<table>
  <tr>
    <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
    </td>
  </tr>
  <tr>
    <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
    <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    <td height="34" colspan="11" align="center">MODULE CO</td>
  </tr>
  <tr>
    <td width="7%" align="center">PO1</td>
    <td width="7%" align="center">PO2</td>
    <td width="7%" align="center">CO AVERAGES</td>
  </tr>
  <tr>
    <td height="71" align="center">MATHEMATICS</td>
    <td align="center"><input type="number" class="select1v select1h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1v','avg1v');calcAvg('select1h', 'avg1h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2v select1h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2v','avg2v');calcAvg('select1h','avg1h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co1" id="avg1h" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr>
    <td height="71" align="center">SCIENCE</td>
    <td align="center"><input type="number" class="select1v select2h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1v','avg1v');calcAvg('select2h','avg2h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2v select2h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2v','avg2v');calcAvg('select2h','avg2h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co2" id="avg2h" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr bgcolor="#9999CC">
    <td height="71" align="center">PO AVERAGES</td>
    <td align="center"><input type="text" name="Avg" id="avg1v" readonly style="width:60px">&nbsp;</td>
    <td align="center"><input type="text" name="Avg1" id="avg2v" readonly style="width:60px">&nbsp;</td>
  </tr>

</table>