從Javascript數組填充HTML表

我想從Javascript數組中取數據並將其放入HTML表中。提供了一個Javascript文件，包括數組和基本功能。我想通過調用函數將數組數據放入我的HTML表格中。下面的JavaScript給定：從Javascript數組填充HTML表

var subject = ['Call Your Mother', 'Cheap Online Meds', 'Change Your Life Today', 'Sppoky Stories', 'Meet Singles In Your Area', 'Have You Heard?', 'Yo', 'RE: Looking for a three legged cat', 'Get Rich Quick!', 'FW: Token Chain Email']; 
var sender = ['Mary Monster', 'Dave Danger', 'Spam Master', 'Spike Spurner', 'Ray Ranger', 'Catherine Chaos', 'Van Pire', 'Andy Argye', 'Rick Roger', 'Sue Mee']; 
var body = ['Message 1','Message 2','Message 3','Message 4','Message 5','Message 6','Message 7','Message 8','Message 9','Message 10']; 


function loadGeeMails(){ 
    for (var i = 0; i < 10; i++){ 
     var message = generateMessage(); 
     window.geemails.push(message); 
    } 
} 

function generateMessage(date){ 
    var message = {}; 
    message.date = date || getRandomDate(); 
    message.subject = getRandomElement(subject); 
    message.sender = getRandomElement(sender); 
    message.body = getRandomElement(body); 
    return message; 
} 

function getRandomElement(arr){ 
    return arr[Math.floor(Math.random() * arr.length)]; 
} 

function getNewMessage(){ 
    var now = new Date(); 
    return generateMessage(now); 
} 

function getRandomDate(){ 
    var year = 2013; 
    var month = Math.floor(Math.random() * 12) + 1; 
    var day = Math.floor(Math.random() * 30) + 1; 
    var hours = Math.floor(Math.random() * 12) + 1; 
    var minutes = Math.floor(Math.random() * 59) + 1; 
    return new Date(year, month, day, hours, minutes); 
} 

//load intial GeeMail data to window object 
(function(){ 
    window.geemails = []; 
    loadGeeMails(); 
})();

我想用這些陣列和/或函數來填充HTML見下表：

<html> 
    <head> 
     <Title>Kevin Gee-mail Challenge</title> 
     <script src="js/mail-generator.js"></script> 
     <link href="css/style.css" rel="stylesheet" media="screen"> 
    <script> 
     window.onload = function(){ 
      //Call javascript here 
     }; 


    </script> 
    </head> 
    <body> 

     <div class="container" id="main"></div> 
     <h1>This is your inbox.</h1> 
     <table> 
      <tr> 
       <th>Date</th> 
       <th>Sender</th> 
       <th>Subject</th> 
       <th>Body</th> 
      </tr> 
      <tr> 
       <td class="date"></td> 
       <td class="sender"></td> 
       <td class="subject"></td> 
       <td class="body"></td> 

      </tr> 
     </table> 
    </body> 
</html>

來源

2015-07-20 Kwhitejr

問題是/？您的表格缺少結尾'' – Andreas

var subject = ['Call Your Mother', 'Cheap Online Meds', 'Change Your Life Today', 'Sppoky Stories', 'Meet Singles In Your Area', 'Have You Heard?', 'Yo', 'RE: Looking for a three legged cat', 'Get Rich Quick!', 'FW: Token Chain Email']; 
 
var sender = ['Mary Monster', 'Dave Danger', 'Spam Master', 'Spike Spurner', 'Ray Ranger', 'Catherine Chaos', 'Van Pire', 'Andy Argye', 'Rick Roger', 'Sue Mee']; 
 
var body = ['Message 1','Message 2','Message 3','Message 4','Message 5','Message 6','Message 7','Message 8','Message 9','Message 10']; 
 

 

 
function loadGeeMails(){ 
 
    for (var i = 0; i < 10; i++){ 
 
     var message = generateMessage(); 
 
     window.geemails.push(message); 
 
    } 
 
} 
 

 
function generateMessage(date){ 
 
    var message = {}; 
 
    message.date = (date || getRandomDate()).toDateString(); 
 
    message.subject = getRandomElement(subject); 
 
    message.sender = getRandomElement(sender); 
 
    message.body = getRandomElement(body); 
 
    return message; 
 
} 
 

 
function getRandomElement(arr){ 
 
    return arr[Math.floor(Math.random() * arr.length)]; 
 
} 
 

 
function getNewMessage(){ 
 
    var now = new Date(); 
 
    return generateMessage(now); 
 
} 
 

 
function getRandomDate(){ 
 
    var year = 2013; 
 
    var month = Math.floor(Math.random() * 12) + 1; 
 
    var day = Math.floor(Math.random() * 30) + 1; 
 
    var hours = Math.floor(Math.random() * 12) + 1; 
 
    var minutes = Math.floor(Math.random() * 59) + 1; 
 
    return new Date(year, month, day, hours, minutes); 
 
} 
 

 
$("document").ready(function(){ 
 
window.geemails = []; 
 
    loadGeeMails(); console.log(window.geemails); 
 
     $("#emailTemplate").tmpl(window.geemails).appendTo("#emailContainer"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
 
<body> 
 

 
     <div class="container" id="main"></div> 
 
     <h1>This is your inbox.</h1> 
 
     <table> 
 
      <tr> 
 
       <th>Date</th> 
 
       <th>Sender</th> 
 
       <th>Subject</th> 
 
       <th>Body</th> 
 
      </tr> 
 
      <tbody id="emailContainer">     
 
      </tbody>  
 
     </table> 
 
    
 
    <!-- This is the template --> 
 
<script id="emailTemplate" type="text/x-jquery-tmpl"> 
 
    <tr> 
 
        <td> ${date} </td> 
 
        <td> ${sender} </td> 
 
        <td> ${subject} </td> 
 
        <td> ${body} </td> 
 
       </tr> 
 
</script>

這裏做只使用JQuery的模板綁定，這可能是真正的輕鬆和clean.Please找到的jsfiddle JSFiddle

JS Fiddle link http://jsfiddle.net/cc44s778/

的更好的辦法

來源

2015-07-20 07:01:26

請在自己的答案中包含代碼。 –

喬恩P - 我有人說要在答案中添加鏈接。現在你在回答中說出了代碼。我應該遵循什麼。 –

總是在答案或問題中有代碼，除了代碼之外，小提琴還是很好的。使用StackOverflows代碼片段（編輯器中的<>按鈕）更好。 –

創建將遍歷window.geemails創造tr元素函數將附加到問題表中。例如： -

function createTableRows(){ 
    for(var i=0; i < window.geemails.length; i++){ 
     var obj = window.geemails[i]; 
     var trElm = document.createElement('tr'); 

     var dateTdElm = document.createElement('td'); 
     var dateTxt = document.createTextNode(obj.date); 
     dateTdElm.appendChild(dateTxt); 

     var senderTdElm = document.createElement('td'); 
     var senderTxt = document.createTextNode(obj.sender); 
     senderTdElm.appendChild(senderTxt); 

     var subjectTdElm = document.createElement('td'); 
     var subjectTxt = document.createTextNode(obj.subject); 
     subjectTdElm.appendChild(subjectTxt); 

     var bodyTdElm = document.createElement('td'); 
     var bodyTxt = document.createTextNode(obj.body); 
     bodyTdElm.appendChild(bodyTxt); 

     trElm.appendChild(dateTdElm); 
     trElm.appendChild(senderTdElm); 
     trElm.appendChild(subjectTdElm); 
     trElm.appendChild(bodyTdElm); 

     document.tables[0].appendChild(trElm); 
    } 
}

不過，我會建議使用datatables或JS庫（如果可能的話），這樣的要求。 - 好運

來源

2015-07-20 06:35:09 sbanerjee

請注意，DOM的每次操作都要重新計算。如果可能的話，只更新一次DOM會更高效。 –

作爲@JonP評論的補充，您可以使用[DocumentFragment]（https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment）作爲緩衝區，並將創建的行一次添加到DOM [小提琴]（http://jsfiddle.net/hq5e1cka/）。 – Andreas

從Javascript數組填充HTML表

回答

相關問題