从Javascript数组填充HTML表
[英]Populate HTML table from Javascript array
问题描述
我想从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>
2 个解决方案
解决方案1
2 已采纳 2015-07-20 07:01:26
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/
解决方案2
0 2015-07-20 06:35:09
创建一个将在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);
}
}
不过，我会建议使用数据表或一个js库（如果可能的话），这样的要求。 - 祝好运
从javascript数组格式填充HTML表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.