html - 在jsp表中计算每一行

Question

我在 jsp 中有一个表，它有 3 列 - num1、num2、sum

<table>
    <tr>
        <td>
            Number1
        </td>
    </tr>
    <tr>
        <td>
            Number2
        </td>
    </tr>
    <tr>
        <td>
            Sum
        </td>
    </tr>

    <s:iterator value="transactionList"  var="row" status="status" >
        <tr>
            <td>
                <s:textfield name = "num1" id="num1" onblur="fnSum();" />
            </td>
            <td>
                <s:textfield name = "num2" id="num2" onblur="fnSum();" readonly="true" />
            </td>
            <td>
                <s:textfield name = "sum" id="sum" />
            </td>
        </tr>
    </s:iterator>

    <script type="text/javascript">
    function fnSum()
    {
        var num1 = parseInt(document.getElementById("num1").value);
        var num2 = parseInt(document.getElementById("num2").value);
        var total = num1 + num2;
        document.getElementById("sum").value = total;
    }
    </script>

我想自动显示每一行的总和。上面的代码仅适用于第一行，但不适用于其他行。我不知道该怎么做。提前致谢

Answer 1

正如@Ramesh 所说，您在每一行上使用相同的 ID，这是您的问题。您需要根据每一行动态生成 ID。一种方法是使用status来自 的属性<s:iterator />。

此外，您的 JavaScript 代码具有硬编码的 ID，因此表中具有正确 ID 的事件将不起作用。这是适合您的解决方案：

<s:iterator value="transactionList" var="row" status="status" >
    <tr>
        <td>
            <s:textfield name="row%{#status.count}-num1" id="row%{#status.count}-num1" onblur="fnSum('row%{#status.count}');" />
        </td>
        <td>
            <s:textfield name="row%{#status.count}-num2" id="row%{#status.count}-num2" onblur="fnSum('row%{#status.count}');" readonly="true" />
        </td>
        <td>
            <s:textfield name="row%{#status.count}-sum" id="row%{#status.count}-sum" />
        </td>
    </tr>
</s:iterator>


<script type="text/javascript">
    function fnSum(row)
    {
        var num1 = parseInt(document.getElementById(row + "-num1").value);
        var num2 = parseInt(document.getElementById(row + "-num2").value);
        var total = num1 + num2;
        document.getElementById(row + "-sum").value = total;
    }
</script>

注意：由于我不使用 Struts，因此未测试此代码。还想知道为什么您不显示来自var="row"?