Question

我是javascript的新手，正在制作基本的HTML时间表表格。我只是试图将各种小时类型（常规，加班，生病等）加在一起，并将计算出的值放入＆＃34;总小时数＆＃34;文本框。这是我尝试过的功能（我现在只使用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>

提前感谢您的帮助！

-Matt

Answer 1

如果您多次执行相同的操作，请考虑如何使用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（{ {1}}）。

浏览表格中的表格行。因此，行和单元格：

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

除了total（最后一个）之外的每个输入。分配

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

给他们。

Full example

Javascript：将多个字段一起添加并插入Form上的Totals列

1 个答案: