Question

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

我想使用这些数组和/或函数来填充下面的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>

Answer 1

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模板绑定，这可能非常简单和干净。请找到JSfiddle JSFiddle

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

Answer 2

创建一个迭代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库（如果可能）来满足此类要求。 - 祝你好运

从Javascript数组填充HTML表

2 个答案: