如何使用JavaScript填充表格並進行打印

Question

我有一個表格，用戶可以在填寫后填寫並打印表格。 我似乎無法驗證用戶是否完成。 用戶填寫完表格后，我希望將整個表格打印出來。 現在，它僅打印最后一個條目。

<!DOCTYPE html>

    <html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type="text/javascript">

            function validateForm() 
            {       
                var x = document.getElementById('fname').value;

                if(x === null || x === "")
                {
                    document.getElementById('error1').innerHTML = "Invalid Entry";            
                }
                else
                    //tableCreate();
                addMore();
            }

            function addMore()
            {

                if(confirm("Would you like to add more names?") === true)
                {
                    document.getElementById('theForm').reset();
                //tableCreate();
                //console.log("ADD MORE");
                }
                else
                    tableCreate();
            }

            function tableCreate()
            {
                var N = document.getElementById('fname').value;
                var L = document.getElementById('lname').value;
                var D = document.getElementById('dob').value;

                var ar = [N, L, D];
                console.log(ar);
                document.write('<table>');
                document.write('<tr>');
                document.write('<th>First Name</th>');
                document.write('<th>Last Name</th>');
                document.write('<th>Date of Birth</th>');
                document.write('</tr>');                

                document.write('<tr');
                for(var i = 0; i < ar.length; i++)
                {
                    document.write('<br><td>' + ar[i] + '</td>');
                }
                document.write('</tr>');

                document.write('</table>');
            }            
        </script>
    </head>
    <body>

        <form name="theForm" action="FormAndTable.html" method="post">
            First Name: <input type="text" id="fname">
            <span style="color:red" id="error1"></span><br>
            Last Name: <input type="text" id="lname"><br>
            Date of Birth: <input type="text" id="dob"><br>
            <input type="button" value="Save" onclick="validateForm()">
        </form>

    </body>
    </html>

Answer 1

您的代碼有很多錯誤。

您正在使用document.write()在頁面上生成新內容。 這不僅會導致每次修改DOM（性能），而且在生成DOM時還必須包含document.write語句，這意味着代碼的位置將確定結果是否是您想要的結果。期望。 相反，您應該設置DOM中已經存在的“輸出區域”，並且當頁面具有新數據時，只需將其注入該輸出區域即可。 這就是為什么您始終丟失先前的輸入的原因 ，每次添加新用戶時，您都在寫出一個全新的表，該表將替換已經寫入頁面的舊內容。
您正在檢索不止一次的DOM元素。 相反，只需等待頁面准備就緒，然后設置變量以保留整個代碼中所需的DOM引用。

請查看下面的工作代碼片段，以獲取更現代，更符合標准且更精簡的解決方案。

 // Wait until the DOM is loaded... window.addEventListener("DOMContentLoaded", function(){ // Set up references to the DOM elements you'll need acces to: var fName = document.getElementById('fname'); var lName = document.getElementById('lname'); var dob = document.getElementById('dob'); var oa = document.getElementById("outputArea"); var btn = document.getElementById("btnSave"); var frm = document.getElementById("theForm"); var err = document.getElementById("error1"); // Set up string variables for the beginning and end of the table var beginTable = '<table><tr><th>First Name</th><th>Last Name</th><th>Date of Birth</th></tr>'; var endTable = '</table>'; // Variable to store the entire table as it grows var output = beginTable; // When the button is clicked, run the suppied function btn.addEventListener("click", function() { // Gather up the input into an array var ar = [fName.value, lName.value , dob.value]; // If there is no first name if(!fName.value) { // Display an error err.innerHTML = "Invalid Entry"; } else { // There is data, begin a new row output +="<tr>"; // Loop over the array and inject the input element's values into new table cells for(var i = 0; i < ar.length; ++i) { output += '<td>' + ar[i] + '</td>'; } // End the row output +="</tr>"; // Ask if user is done addMore(); } }); function addMore() { if(confirm("Would you like to add more names?")) { // Not done yet, clear form out theForm.reset(); } else { // Done. close up the table output += endTable; // Write the string to the waiting output area oa.innerHTML = output; } } });

 <form name="theForm" id="theForm" action="FormAndTable.html" method="post"> First Name: <input type="text" id="fname"><span style="color:red" id="error1"></span><br> Last Name: <input type="text" id="lname"><br> Date of Birth: <input type="text" id="dob"><br> <input type="button" value="Save" id="btnSave"> </form> <!-- Instead of document.write, which writes over the document, set up a placeholder for output that starts off empty, but at least is positioned in the DOM ahead of time. --> <div id="outputArea"></div>

如何使用JavaScript填充表格並進行打印

問題描述

1 個解決方案

解決方案1
1 2016-03-14 00:15:51

如何使用JavaScript填充表格並進行打印

問題描述

1 個解決方案

解決方案1 1 2016-03-14 00:15:51

解決方案1
1 2016-03-14 00:15:51