Question

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

以下是代码：

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

}

Answer 1

您可以轻松地将php变量转移到像这样的javascript

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

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

<script>
var myString = '<?php echo $myString?>';
</script>

Answer 2

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

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

Answer 3

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

但是（和一个巨大的但是那样）

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

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

现在来看一些真实的代码：

通过构建我已经解释过的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/）来显示这段代码。

Answer 4

您可以使用以下代码：

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

Answer 5

你需要用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>

我没有测试过这段代码，但它应该可以运行。

基于php变量在Javascript中创建循环

5 个答案: