Question

我有一个xpage（见下文），它显示了几行数字字段和3列（常规，加班，总计）。

我在常规和加班（onBlur）的每个字段上都有这个代码：

var reg1 = parseFloat(document.getElementById("#{id:reg1}").value) || 0;
var over1 = parseFloat(document.getElementById("#{id:over1}").value) || 0;
var total1 = reg1 + over1;

document.getElementById("#{id:total1}").value = total1;

document.getElementById("#{id:total1}").disabled = true

最终，我需要添加更多行。什么是最好的方法来添加它们所以我可以显示常规列的总数和加班列的总数？

对我上述代码的任何评论也表示赞赏。

查看所有xpage：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">

<xp:this.data>
    <xp:dominoDocument var="document1" formName="TestHrs"></xp:dominoDocument>

</xp:this.data>


<xp:table style="width:383.0px">
    <xp:tr>
        <xp:td>Regular</xp:td>
        <xp:td>Overtime</xp:td>
        <xp:td>Total</xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>
            <xe:djNumberTextBox id="reg1"
                value="#{document1.rgHr1}">


                <xe:this.onBlur><![CDATA[var reg1 = parseFloat(document.getElementById("#{id:reg1}").value) || 0;
var over1 = parseFloat(document.getElementById("#{id:over1}").value) || 0;
var total1 = reg1 + over1;

document.getElementById("#{id:total1}").value = total1;

document.getElementById("#{id:total1}").disabled = true]]></xe:this.onBlur>
            </xe:djNumberTextBox>
        </xp:td>
        <xp:td>
            <xe:djNumberTextBox id="over1"
                value="#{document1.ovHr1}">





                <xe:this.onBlur><![CDATA[var reg1 = parseFloat(document.getElementById("#{id:reg1}").value) || 0;
var over1 = parseFloat(document.getElementById("#{id:over1}").value) || 0;
var total1 = reg1 + over1;

document.getElementById("#{id:total1}").value = total1;

document.getElementById("#{id:total1}").disabled = true]]></xe:this.onBlur>
            </xe:djNumberTextBox>
        </xp:td>
        <xp:td>
            <xe:djNumberTextBox id="total1"
                value="#{document1.toHr1}">
            </xe:djNumberTextBox>
        </xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>
            <xe:djNumberTextBox id="reg2"
                value="#{sessionScope.reg2}">
                <xe:this.onBlur><![CDATA[var reg2 = parseFloat(document.getElementById("#{id:reg2}").value) || 0;
var over2 = parseFloat(document.getElementById("#{id:over2}").value) || 0;
var total2 = reg2 + over2;

document.getElementById("#{id:total2}").value = total2;

document.getElementById("#{id:total2}").disabled = true]]></xe:this.onBlur>
            </xe:djNumberTextBox>
        </xp:td>
        <xp:td>
            <xe:djNumberTextBox id="over2"
                value="#{sessionScope.over2}">


                <xe:this.onBlur><![CDATA[var reg2 = parseFloat(document.getElementById("#{id:reg2}").value) || 0;
var over2 = parseFloat(document.getElementById("#{id:over2}").value) || 0;
var total2 = reg2 + over2;

document.getElementById("#{id:total2}").value = total2;

document.getElementById("#{id:total2}").disabled = true]]></xe:this.onBlur>
            </xe:djNumberTextBox>
        </xp:td>
        <xp:td>
            <xe:djNumberTextBox id="total2"
                value="#{sessionScope.tot2}">

            </xe:djNumberTextBox>
        </xp:td>
    </xp:tr>
</xp:table>&#160;&#160;Total Regular&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Total Overtime<xp:br></xp:br>
<xe:djNumberTextBox id="totalRegular"></xe:djNumberTextBox>
&#160; &#160; &#160; &#160; &#160; &#160; &#160;

<xe:djNumberTextBox id="totalOver"></xe:djNumberTextBox></xp:view>

Answer 1

如果您需要对几个输入求和，也许您可以为它们设置相同的css类，然后使用css选择器来获取所有这些并进行数学运算：

<xe:djNumberTextBox styleClass="reg"></xe:djNumberTextBox>

然后你可以像这样使用csjs函数：

// i.e. pass to the function '.reg'
function getSumByClass(strClassName) {
    var sum = 0;
    var allInputs = dojo.query(strClassName);
    for (var i = 0, l = allInputs.length; i < l; i++) {
        sum += parseFloat(allInputs[i].value);
    }
    return sum;
}

另外看一下你的代码，为了更好的布局，我会使用css padding / margin属性而不是几个spaceblank HTML chars。

添加字段并显示总计

1 个答案: