僅使用JS和HTML顯示最近5個提交的資料-有解無憂

我有一個小問題，我還是 Java Script 的初學者，我對它的了解不多。我的問題是：

我需要創建一個虛假的捐贈表格。該表單包含用戶可以在其中寫入他的資料的欄位，例如他的電話號碼，捐贈金額等......當用戶點擊提交他的捐贈金額時，他的名字應該顯示在表格中，除了其他最后的其他 4 次捐贈人們。我認為我的代碼應該是這樣的

<body>
    <div id="container">
        <form action="#" name="myForm" id="myForm">

            <br>name: <input type="text" name="name" id="donatorName"></br>
            <span id="Enter your name"></span>

            <br>Donate amount: <input type="number" name="donateAmount" id="amount"></br>
            <span id="Your total donate amount"></span>
            <br/>

            <button type="button" value="submit" onclick="return validation(); document.getElementById('container').style.display='none'">submit</button>
        </form>
    </div>

    <div id="new_container">
        <p id="displa_name"></p>
        <p id="display_total_amount"></p>

        <div id="Btn"></div>
    </div>

    <script type="text/javascript">

        function validation(){
            var donatorName = document.getElementById("donatorName").value;
            var donateAmount = document.getElementById("amount").value;

            // donatorName validation
            if(donatorName == ""){
                document.getElementById("donatorName").innerHTML = "Name cannot be empty";
                document.getElementById("donatorName").style.color = "#ff0000";
                return false;
            }

            // donateAmount validation
            if(donateAmount == ""){
                document.getElementById("amount").innerHTML = "Total amount cannot be empty";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            if(donateAmount < 1){
                document.getElementById("amount").innerHTML = "Donate amount should be greater than 0";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            showDetails();
        }
    
        function showDetails(){
            document.getElementById('container').style.display='none';
            // name
            const  = document.getElementById("amount").value;
            document.getElementById("display_name").innerHTML = `DonatorName: ${donatorName}`;    
            document.getElementById("display_total_amount").innerHTML = `TotalAmount: ${donateAmount}`;    
    
</script>

</body>

我不確定我的代碼，所以請幫助我并向我解釋我還能怎么做。我現在想保持簡單，所以請給我一些建議：D

uj5u.com熱心網友回復：

我建議您為此使用后端語言，例如 PHP，但如果您需要 javaScript，這里有一個簡單的方法。您可以將資料存盤在陣列中，也可以將它們快取起來，這樣即使在重繪選項卡時資料也不會丟失。但是讓我們在這個例子中使用陣列。你已經有了你的表格，所以讓我們跳過它。

對于 HTML 中的表格：

<table>
    <thead>
        <th>Name</th>
        <th>Amount</th>
    </thead>
    <tbody id="displayDonations">
        <!-- Data will be displayed here thru javaScript -->
    </tbody>
</table>

腳本：

let donations = [];

function validation() { // This is called when you submit the form
    // Put your validations here
    // Example Validation: return false if not valid
    if (!isValid()) return false; 

    // Remove first element of the array if length == 5
    if (donations.length == 5) {
        donations.shift();
    }

    // Push object into the donations array
    donations.push(
        {
            "name"   : document.getElementById("donatorName").value,
            "amount" : document.getElementById("amount").value
        }
    );

    showDetails();
}

function showDetails() {
    let tableBody = "";

    donations.forEach((element) =>{
        // Construct what you want to display
        tableBody  = ""
              "<tr>"
                "<td>"   element.name   "</td>"
                "<td>"   element.amount   "</td>"
              "</tr>"
        ;
    });
    
    // Write the tableBody to the HTML
    document.getElementById("displayDonations").innerHTML = tableBody;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/441767.html

標籤：javascript html 形式

上一篇：將注釋輸入指標更改為頂部

下一篇：如何將資料表中的專案輸入文本框