javascript - PHP 循环中的表行总和

Question

我想在用户输入值时动态地对表格行求和。由于行数可能会有所不同，我想使用 php 循环来完成此操作。我在让循环正常工作时遇到问题。例如，如果有两个单独的行要求和，则只会对最下面的行求和。

<script type="text/javascript">
    var sumScoreF = function(a) { 
    var rowtotal = 0;
    n = new Array();

    for (i = 1; i <= 3; i++) { 
       if (parseInt(document.getElementById(a + i).value) > 0) {
           n[i] = parseInt(document.getElementById(a + i).value);
           rowtotal += n[i];
       }
     }

     document.getElementById(a + 'total').value = rowtotal;
};
</script>

以下是单行总和的示例。总计列在输入值时继续求和。这是一个不错的效果，但不是必需的。

<table>
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
    <td>total</td>
  </tr>
  <tr>
    <td>
      <input name="p1g1" id="p1g1" type="text" value="" onChange="sumScoreF('p1g')" />
    </td>
    <td>
      <input name="p1g2" id="p1g2" type="text" value="" onChange="sumScoreF('p1g')" />
    </td>
    <td>
      <input name="p1g3" id="p1g3" type="text" value="" onChange="sumScoreF('p1g')" />
    </td>
    <td>
      <input name="p1gtotal" id="p1gtotal" type="text" value="" />
    </td>
   </tr>
</table>

这是我尝试使用 php 和 javascript 循环附加行。第一行不会求和，但第二行会。我认为问题出在 javascript 变量“m”上，因为它直接转到最后一行，但我不知道如何修复它。

<table>
<tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
    <td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<script type="text/javascript">
  var k = <?php echo json_encode($j); ?>;
  var m = 'p'+k+'g';
</script>
<tr>
    <td>
        <input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('m')" />
    </td>
    <td>
        <input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('m')" />
    </td>
    <td>
        <input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('m')" />
    </td>
    <td>
        <input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
    </td>
</tr>
<?php } ?>

非常感谢任何帮助。谢谢。

Answer 1

使用 PHP 在 onChange javascript 函数调用中回显循环变量:

<table>
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
    <td>total</td>
    </tr>
    <?php for($j=1;$j<=3;$j++) { ?>
  <tr>
    <td>
      <input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
  </td>
  <td>
    <input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
  </td>
  <td>
    <input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
  </td>
  <td>
    <input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
  </td>
</tr>
<?php } ?>