如何提交用户输入数据并将其反映在垂直 table 中？

Question

我是初学者，我正在尝试编写一个简单的程序，根据给定的先前发票计算滞纳金 amount/payments。我在这个项目的早期部分被难住了，基本上我试图开始的地方是获取用户输入的值并将它们显示在我下面的 table 中，出于某种原因我无法弄清楚。你可以在这里查看我到目前为止的内容：http://176.32.230.9/testingnicoledelarosa.com/

这是我目前的代码：

<!doctype html>
<html>
<head>
    <title>Late Fee Calculator</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" type="text/css" href="style.css">

<script>

    function addRow() {

        var table= document.getElementByID("results");
        var row= document.createElement("tr");
        var td1= document.createElement("td");
        var td2= document.createElement("td");
        var td3= document.createElement("td");
        td1.innerHTML = document.getElementByID("invoiceAmount").value;
        td2.innerHTML = document.getElementByID("previousBalance").value;
        td3.innerHTML = document.getElementByID("paymentAdjustments").value;
        row.appendChild(td1);
        row.appendChild(td2);
        row.appendChild(td3);
        table.children[0].appendChild(row);

    }


</script>

</head>

<body>

<div>

    <form>

        Invoice Amount:<br>

        <input type="number" id="invoiceAmount">

        <br>
        <br>

        Previous Balance:<br>

        <input type="number" id="previousBalance">

        <br>
        <br>

        Payments/Adjustments:<br>

        <input type="number" id="paymentAdjustments">

        <br>
        <br>

        <input type="submit" value="Submit" onclick="addRow()">

    </form>



</div>    

    <br>

<div>

    <table border="1" id="results">

    <tr>

        <th>Total Invoice Amount</th>
        <td>data</td>

    </tr>

    <tr>

        <th>Previous Balance</th>
        <td>data</td>

    </tr>

    <tr>

        <th>Payments/Adjustments</th>
        <td>data</td>

    </tr>

    <tr>

        <th>Late Fee</th>
        <td>data</td>

    </tr>

    <tr>

        <th>Balance (Amount Due)</th>
        <td>data</td>

    </tr>

    </table>

</div>

</body>
</html>

Answer 1

嗯，有两个原因。

首先，"document.getElementByID" 调用应该是 "document.getElementById"（小写 d）。

但是，为了防止您的表单实际提交和重新加载页面（并且在您的情况下清除 table 中的数据），您可以在您的末尾添加一个 'return false;'添加行() 函数。所以它看起来像这样：

function addRow() {
    var table= document.getElementById("results");
    var row= document.createElement("tr");
    var td1= document.createElement("td");
    var td2= document.createElement("td");
    var td3= document.createElement("td");
    td1.innerHTML = document.getElementById("invoiceAmount").value;
    td2.innerHTML = document.getElementById("previousBalance").value;
    td3.innerHTML = document.getElementById("paymentAdjustments").value;
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    table.children[0].appendChild(row);
    return false;
}

然后您的输入标签将如下所示：

<input type="submit" value="Submit" onclick="return addRow();">

希望对您有所帮助！

如何提交用户输入数据并将其反映在垂直 table 中？

How do I submit user-input data and reflect it in a vertical table?

javascript

html-table