Question

我目前正在开发一个需要对选择字段的值进行求和（整数值）的表单，结果应该显示在另一个输入字段中。布局是评分表的布局，有多行，显示部分总计和总计，分数总和必须分阶段（或行）完成。因此，单行的所有分数仅为该行的部分总数。

我有一个问题，我不是很擅长javascript，我找到了一个以某种方式工作的脚本，但是将所有行的结果添加到第一行的部分总字段中（请参见下图）。

链接到图片：http://postimg.org/image/77fxwl2db/

表单工作的正确方法是，在单行的选择字段中选择的分数将在同一行的浅灰色字段中显示部分总计，仅显示该字段，而深灰色（ black）字段将显示前一部分总和PLUS与该行之一的总和。（请参见下图）

链接到图片：http://postimg.org/image/ddolwjfft/

希望这有意义......至于代码，这就是我正在使用的：

<form method="post" action="#" >
    <fieldset class="scores_row_1">
    <select class="input1" onchange="OnChange(this.value)" name="score_1">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_2">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_3">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_4">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_5">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_6">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>


    <span class="spacer"></span>
    <input type="text" maxlength="2" class="input2" id="total_row_1" />
    <input type="text" maxlength="2" class="input3" />
</fieldset>
</form>

上面的代码代表一行，但需要几行。至于使用的javascript，这是代码：

<script type="text/javascript" language="javascript">
var row = 1;
var sum = 0;

function OnChange(value) {
    sum += new Number(value);
    document.getElementById('total_row_'+ row).value = sum;
}

请对此有任何帮助，我们将不胜感激。我找了一些选择，但我找不到符合这种特定情况的任何东西！

Answer 1

我为您开发了一个解决方案，将您的问题扩展到两行。在您的原始源中做了各种更改，这些更改有很多错误。添加了评论，希望解决方案能够自我解释。

每列的相应总数显示在选择字段旁边，每行的总数显示在下面的输入字段中，

使用Javascript： -

function OnChange(node) {
var row=1; 
var sum = 0;

    if(node.parentNode.className=="scores_row_1"){row=1;} //Row selector
    if(node.parentNode.className=="scores_row_2"){row=2;}

    var value=node.value;
    if(value=="X"){
    value=10;  //dont know what you intend to do with X value, for me i have set it as 10,make your changes in the if condition accordingly
    }
    if(value=="M"){
    value=0; //for option M
    }
    //made changes to previous source, now added loop to loop through the select elements, note that you have to assign a default value to the select tags like M 
    for(var i=1;i<7;i++)
    { //sum is total of select elements, get each by their unique name attribute
sum+=parseInt(document.getElementsByName("score_"+row+"_"+i)[0].value);
}

    document.getElementById('total_row_'+ row).value = sum; //assign sum to the input element


}

function OnChangeFinal() {   
    //function keeps calling on mousemove and sums total of both rows input fields and assignto the final input field. You can change the event type i just used this for demo
    document.getElementById('final_row').value= parseInt(document.getElementById('total_row_1').value) + parseInt(document.getElementById('total_row_2').value);
    }

HTML： -

   <form method="post" action="#" onmousemove="OnChangeFinal()"> <!--assigned event to the form to call OnChangeFinal()--> 
    <fieldset class="scores_row_1">
    <select class="input1" onchange="OnChange(this)" name="score_1_1">//assign names as score_rowNumber_scoreNumber to uniquely identify each element.
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_2">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_3">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_4">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_5">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_6">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>


    <span class="spacer"></span>
        <input type="text" maxlength="2" class="input2" value="0" id="total_row_1" /><!--assigned default value 0 and id-->

</fieldset>
     <fieldset class="scores_row_2">
    <select class="input1" onchange="OnChange(this)" name="score_2_1">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_2">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_3">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_4">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_5">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_6">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>


    <span class="spacer"></span>
    <input type="text" maxlength="2" class="input2" value="0" id="total_row_2" /><!--assigned default value 0 and id-->
         <input type="text" maxlength="2" class="input3" value="0" id="final_row"/><!--The grand total appears here-->
</fieldset>

</form>

小提琴： - http://jsfiddle.net/TRV4f/3/

编辑1： - 在源

中添加了评论

编辑2： - 正如用户对上一个源的更改所指出的那样，它有错误。

Answer 2

函数OnChange正在使用全局变量row来知道正在修改哪一行。你的问题是：

您有多行，row始终为1。
您只有一个全局变量（sum），但每行需要一个变量。

我建议你在函数OnChange中添加第二个paratemer让它知道哪一行（只需删除全局变量并将其添加为参数）并避免变量sum，在添加任何金额时使用字段的当前值：

function OnChange(value, row) {
    var sum= document.getElementById('total_row_'+ row).value + new Number(value);
    document.getElementById('total_row_'+ row).value = sum;
}

注意：请注意，当您第一次设置值时，此逻辑有效，但如果有前一个值，则不会在总和之前减去该值。

然后你可以创建一个循环来计算所有先前行的总和，但是我会在该文本字段中添加一个id来轻松访问它。

选择字段中值的总和，以显示在另一个文本字段中（javascript）

2 个答案: