如何用javascript填充表格並將其打印出來

我有一個表格，用戶可以在表格填寫完成後打印表格。我似乎無法驗證用戶是否完成。一旦用戶完成填充表格，我希望打印整個表格。現在它只打印最後一個條目。如何用javascript填充表格並將其打印出來

<!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>

來源

2016-03-13 Avi

你'別人/ * tableCreate（）; */addMore（）;'。當你註釋掉'tableCreate（）'時，'addMore（）'被移入'else'語句中。不知道這是否是需要的。 – Oriol

請參閱：[頁面加載後不允許document.write？]（http://stackoverflow.com/questions/5985740/not-allowed-document-write-after-page-load） – Roberto

如果我的表單不是空的並提交我想問用戶他們是否想輸入另一個條目。這就是爲什麼之後，我調用函數addMore（） – Avi

你的代碼有很多錯誤。

您正在使用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>

來源

2016-03-14 00:15:51

非常感謝。這非常有幫助 – Avi

如何用javascript填充表格並將其打印出來

回答

相關問題