从Javascript数组填充HTML表_Javascript_Jquery_Html_Arrays

从Javascript数组填充HTML表

javascript jquery html arrays

从Javascript数组填充HTML表,javascript,jquery,html,arrays,Javascript,Jquery,Html,Arrays,我想从Javascript数组中获取数据，并将其放入HTML表中。提供了一个Javascript文件，包括数组和基本函数。我想通过调用函数将数组数据放入HTML表中。给出了以下Javascript： var subject = ['Call Your Mother', 'Cheap Online Meds', 'Change Your Life Today', 'Sppoky Stories', 'Meet Singles In Your Area', 'Have You Heard?', 'Y

我想从Javascript数组中获取数据，并将其放入HTML表中。提供了一个Javascript文件，包括数组和基本函数。我想通过调用函数将数组数据放入HTML表中。给出了以下Javascript：

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(); 
})();

var subject=[“给你妈妈打电话”，“便宜的在线药物”，“今天改变你的生活”，“Sppoky故事”，“在你所在地区遇到单身人士”，“你听说过吗？”，“哟”，“RE:找一只三条腿的猫”，“快速致富！”，“FW:代币链电子邮件”]；
var sender=['Mary Monster'，'Dave Danger'，'Spam Master'，'Spike Spurner'，'Ray Ranger'，'Catherine Chaos'，'Van Pire'，'Andy Argye'，'Rick Roger'，'Sue Mee']；
变量正文=['Message 1'、'Message 2'、'Message 3'、'Message 4'、'Message 5'、'Message 6'、'Message 7'、'Message 8'、'Message 9'、'Message 10']；
函数loadGeeMails（）{
对于（变量i=0；i<10；i++）{
var message=generateMessage（）；
window.geemails.push（消息）；
}
}
函数生成消息（日期）{
var message={}；
message.date=date | | getRandomDate（）；
message.subject=getRandomElement（主题）；
message.sender=getRandomElement（发送方）；
message.body=getRandomElement（body）；
返回消息；
}
函数getRandomElement（arr）{
返回arr[Math.floor（Math.random（）*arr.length）]；
}
函数getNewMessage（）{
var now=新日期（）；
返回generateMessage（现在）；
}
函数getRandomDate（）{
风险值年份=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；
返回新日期（年、月、日、小时、分钟）；
}
//将初始邮件数据加载到窗口对象
（功能（）{
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>


Kevin Gee邮件挑战赛
window.onload=函数（）{
//在这里调用javascript
};
这是你的收件箱。
日期
发件人
主题
身体

创建一个函数，该函数将在

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);
    }
}

函数createTableRows（）{
对于（var i=0；i


但是，我建议使用或js库（如果可能的话）来满足这些需求。
-祝你好运
var subject=[“给你妈妈打电话”，“便宜的在线药物”，“今天改变你的生活”，“Sppoky故事”，“在你所在地区遇到单身人士”，“你听说过吗？”，“哟”，“RE:找一只三条腿的猫”，“快速致富！”，“FW:代币链电子邮件”]；
var sender=['Mary Monster'，'Dave Danger'，'Spam Master'，'Spike Spurner'，'Ray Ranger'，'Catherine Chaos'，'Van Pire'，'Andy Argye'，'Rick Roger'，'Sue Mee']；
变量正文=['Message 1'、'Message 2'、'Message 3'、'Message 4'、'Message 5'、'Message 6'、'Message 7'、'Message 8'、'Message 9'、'Message 10']；
函数loadGeeMails（）{
对于（变量i=0；i<10；i++）{
var message=generateMessage（）；
window.geemails.push（消息）；
}
}
函数生成消息（日期）{
var message={}；
message.date=（日期| | getRandomDate（））.toDateString（）；
message.subject=getRandomElement（主题）；
message.sender=getRandomElement（发送方）；
message.body=getRandomElement（body）；
返回消息；
}
函数getRandomElement（arr）{
返回arr[Math.floor（Math.random（）*arr.length）]；
}
函数getNewMessage（）{
var now=新日期（）；
返回generateMessage（现在）；
}
函数getRandomDate（）{
风险值年份=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；
返回新日期（年、月、日、小时、分钟）；
}
$（“文档”）.ready（函数（）{
window.geemails=[]；
loadGeeMails（）；console.log（window.geemails）；
$（“#emailTemplate”）.tmpl（window.geemails）.appendTo（“#emailContainer”）；
});

这是你的收件箱。
日期
发件人
主题
身体
${date}
${sender}
${subject}
${body}
问题是什么？您的表缺少结束符
请注意，每次操作DOM时都会重新计算DOM。如果可能的话，只更新DOM一次更有效