Javascript:添加多个字段在一起，并插入到总计列的表单

Javascript: Add multiple fields together and insert into Totals column on Form

本文关键字：插入 表单 添加 在一起 字段 Javascript      更新时间：2023-09-26

我是javascript新手，正在制作一个基本的HTML时间表表单。我只是试图将各种小时类型(常规，加班，病假等)加在一起，并将计算值放入"总小时数"文本框中。以下是我尝试的函数(我现在只使用1个文本框，但希望就如何合并其他文本框提供建议):

<script>
    function findTotal(hours, tot) {
        var hours = document.getElementsbyID('hours1').value;
        var tot = 0;
        for (var i = 0; i < hours.length; i++) {
            if (parseInt(hours[i].value))
                tot += parseInt(hours[i].value);
        }
        document.getElementById('total').value = tot;
    }
</script>
下面是相应的HTML表单部分: 
<b>HOURS</b>
<table width="25%" border="1" cellpadding="0" cellspacing="0" style="background-color: #ffffff;">
    <tr valign="Top">
        <td style="border-width : 0px;">
            <br /><b>Regular</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal(hours)" id="hours1" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Overtime</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours2" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Sick</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours3" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Holiday</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours4" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Vacation</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours5" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Leave</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours6" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Jury Duty</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours7" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>TOTAL HOURS</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" size="5" id="total">
        </td>
    </tr>
</table>

提前感谢您的帮助!

马特

如果您多次执行相同的操作，请考虑如何使用CSS(选择器)或JavaScript(循环)来实现。

清理HTML:

<b>HOURS</b>
<table id="myTable" width="25%">
    <tr valign="top">
        <td>Regular</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Overtime</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Sick</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Holiday</td>
        <td>
            <input type="text" id="hours4" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Vacation
        </td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Leave</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Jury Duty</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>TOTAL HOURS</td>
        <td>
            <input type="text" size="5" id="total" />
        </td>
    </tr>
</table>

将分隔 JavaScript和HTML是很好的做法。如果你使用HTML和JavaScript，最好了解如何访问，例如这里的表， 没有类(getElementsByClassName)和没有id (getElementById)。

遍历表中的表行。因此存在行和单元格:

var table = document.getElementById("myTable");
var rows = table.rows;
var rowsLength = rows.length // the number of all rows in the table

示例第一行第一个单元格:

var firstRowFirstCell = rows[0].cells[0];

在这里，我们遍历没有最后一行(总数)rowsLength - 1的行。input在第二个单元格中。因此我们需要document.getElementsByTagName 

var input = rows[i].cells[1].getElementsByTagName("input");

添加addEventListener:

input[0].addEventListener("blur", function() { ... });

表示除total(最后一个)以外的所有输入。指定

function totalHours(containerID) {
    var table = document.getElementById(containerID);
    var rows = table.rows;
    var rowsLength = rows.length;
    var total = 0;
    for(var i = 0; i < (rowsLength - 1); i += 1) { // not the TOTAL input!
        var input = rows[i].cells[1].getElementsByTagName("input");
        if(input[0].value !== "") { // no empty inputs
            total += parseInt(input[0].value); 
        }        
    }
    return total;
}

。

完整的示例

相关文章：