1

假设我有以下脚本，计算总和。

这是代码：

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="javascript" type="text/javascript">

    function updatesum() {

    line1 = ((document.form.price_1.value -0) * (document.form.number_1.value -0));

    line2 = ((document.form.price_2.value -0) * (document.form.number_2.value -0));

    line3 = ((document.form.price_3.value -0) * (document.form.number_3.value -0));

    line4 = ((document.form.price_4.value -0) * (document.form.number_4.value -0));

    line5 = ((document.form.price_5.value -0) * (document.form.number_5.value -0));

    document.form.sum.value = line1 + line2 + line3 + line4 + line5;

    }
    </script>

    </head>        
    <body>

    <?php

$tR = 1;
$maxlines = 5;

echo '<form name="form" method="post" action="action.php">';
echo '<table><tbody>';

while($tR <= $maxlines)
{
echo '<tr>';
echo '<td width="1"><input name="price_' . $tR . '" onChange="updatesum();"         type="text"></td>';
echo '<td width="1"> x </td>';
echo '<td width="1"><input name="number_' . $tR . '" onChange="updatesum();"         type="text" value="1"></td>';
echo '</tr>';
++$tR;
}
echo '</tbody></table>';

echo 'Total: <input name="sum" value="0" type="text" readonly="readonly">';
echo '<button type="submit" name="Submit" style="display: hidden;">Submit</button>';
echo '</form>';

    ?>

    </body>
    </html>

没关系...但是现在我将变量 $maxlines 从 5 更改为 500...如何调整 Javascript，而无需编写类似的内容：

function updatesum() {

line1 = ((document.form.price_1.value -0) * (document.form.number_1.value -0));

line2 = ((document.form.price_2.value -0) * (document.form.number_2.value -0));

line3 = ((document.form.price_3.value -0) * (document.form.number_3.value -0));

line4 = ((document.form.price_4.value -0) * (document.form.number_4.value -0));

line5 = ((document.form.price_5.value -0) * (document.form.number_5.value -0));

line6 = ((document.form.price_6.value -0) * (document.form.number_6.value -0));

  .......................

line500 = ((document.form.price_500.value -0) * (document.form.number_500.value -0));

document.form.sum.value = line1 + line2 + line3 + line4 + line5 + line6 ........... + line500;

}
4

5 回答 5

1

您可以使用循环遍历所有字段：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script language="javascript" type="text/javascript">

        function updatesum() {
            var prices = document.getElementsByName('price');
            var numbers = document.getElementsByName('number');
            var sum = 0;

            for (var i = 0; i < prices.length; i++) {
                sum += prices[i].value * numbers[i].value;
            }
            document.form.sum.value = sum;
        }
        </script>
    </head>        
    <body>
        <?php
            $tR = 1;
            $maxlines = 50;

            echo '<form name="form" method="post" action="action.php">';
            echo '<table><tbody>';

            while($tR <= $maxlines)
            {
                echo '<tr>';
                echo '<td width="1"><input name="price" onChange="updatesum();"         type="text"></td>';
                echo '<td width="1"> x </td>';
                echo '<td width="1"><input name="number" onChange="updatesum();"         type="text" value="1"></td>';
                echo '</tr>';
                ++$tR;
            }
            echo '</tbody></table>';

            echo 'Total: <input name="sum" value="0" type="text" readonly="readonly">';
            echo '<button type="submit" name="Submit" style="display: hidden;">Submit</button>';
            echo '</form>';
        ?>
    </body>
</html>
于 2012-06-20T20:15:03.177 回答
1

简短的版本是更新脚本并在那里有一个循环来完成所有这些。

但是（一个巨大的但就是这样）

除了解决方案本身之外，您还可以在脚本中改进一些内容。您可以尝试不同的方法来解决您的问题：

  • 您不必分别将函数绑定到每个输入更改元素，并且onchange在 HTML 中使用属性是一种有点过时的方法。
  • 您不必定义每一行。您可以使用 JavaScript 将它们全部汇总，而无需知道您有多少。
  • 我会将您的input元素name属性重命名为您可以在 PHP 中使用的属性，而无需事先知道它的大小。例如，如果您将属性的名称更改为name="price[]"and name="number[]"，您的值将神奇地以 and 的形式发送到您的 PHP$_POST["price"]脚本$_POST["number"]。从那里，您可以动态地玩它。

现在来一些真实的代码：

通过按照我解释的那样构建 HTML，您最终会得到以下想法：

<form name="form">
<input type="text" name="price[]" value="1" /><input type="text" name="number[]" value="10" /><br />
<input type="text" name="price[]" value="2" /><input type="text" name="number[]" value="20" /><br />
<input type="text" name="price[]" value="3" /><input type="text" name="number[]" value="30" /><br />
<input type="text" name="price[]" value="4" /><input type="text" name="number[]" value="40" /><br />
<br /><input type="text" name="sum" value="0" id="sum" />
</form>

然后，按照我建议的事件绑定技术，您的 JavaScript 将被简化为如下所示：

function updateSum() {
    var prices = document.getElementsByName("price[]");
    var numbers = document.getElementsByName("number[]");
    var sum = 0;
    for (var i=0; i < prices.length; i++) {
         sum += prices[i].value * numbers[i].value;
    }

    document.getElementById("sum").value = sum;
} 

var prices = document.getElementsByName("price[]");
var numbers = document.getElementsByName("number[]");
for (var i=0; i < prices.length; i++) {
    prices[i].addEventListener('change', updateSum, false);
    numbers[i].addEventListener('change', updateSum, false);
}

我创建了一个 jsFiddle ( http://jsfiddle.net/nXqgW/2/ ) 来展示这个代码。

于 2012-06-20T20:30:03.070 回答
1

您可以像这样轻松地将 php 变量传输到 javascript

<script>
var maxlines = <?php echo $maxLines?>;
</script>

您现在有一个 javascript 变量 maxlines 等于您的 php 变量另外，请记住，如果您正在传输字符串以将其放在引号中

<script>
var myString = '<?php echo $myString?>';
</script>
于 2012-06-20T20:14:13.773 回答
0

你需要用 PHP 输出 javascript 行，所以在 PHP 中你有你的 maxlines 变量你可以做一个循环；

<script>
    ...
    <?php for($i = 0; $i < $maxlines; $i++) {
        //Output javascript line
        ?>

        line<?php echo $i; ?> = ((document.form.price_<?php echo $i; ?>.value -0) * (document.form.number_<?php echo $i; ?>.value -0));
    <?php
    } ?>

    document.form.sum.value = 0 <?php for($int i = 0; $i < $maxlines; $i++) {
        echo '+ line' . $i;
    } ?>
</script>

我还没有测试过这段代码，但它应该可以工作。

于 2012-06-20T20:12:07.753 回答
0

您可以使用这样的代码：

<script>
function updatesum() {
    <?php $lines = array() ?>
    <?php for($i = 0; $i < $count; $i++) : ?>
        line<?= $i ?> = ((document.form.price_<?= $i ?>.value -0) * (document.form.number_<?= $i ?>.value -0));
        <?php $lines[] = 'line' . $i;
    <?php endfor; ?>
    document.form.sum.value = <?= implode(' + ', $lines);
}
</script>
于 2012-06-20T20:09:12.227 回答