在表格中打印数组？ Javascript / HTML
[英]Printing array in a table? Javascript / HTML
问题描述
In this project i have to make a diary and one of the criteria is a table that tally's the number of appointments that have been input previously.
在这个项目中，我必须写日记，其中一个标准是一张表格，该表格记录了之前输入的约会数量。 Currently this is my script, it works however, when i there are multiple years, the tally only recognises the first year, and doesn't tally the second.目前这是我的脚本，但它有效，当我有多个年份时，计数仅识别第一年，而不会识别第二年。 it instead recognises it as NaN.而是将其识别为 NaN。 Could someone please help and point out where i'm going wrong.有人可以帮忙并指出我哪里出错了。 Thanks a ton :)万分感谢 ：）
<html>
<head>
<script>
const MIN_YEAR = 2019;
var dates = [];
var priArr = [];
var years = [];
var list = [];
let appointment = {
date: "",
startTime: "",
endTime: "",
subject: "",
venue: "",
rowData: function () {
return "<tr><td>" + this.date + "</td><td>" + this.startTime + "</td><td>" + this.endTime + "</td><td>" + this.subject + "</td><td>" + this.venue + "</td><td>" + this.priority + "</td></tr>";
}
}
let yearSumm = {
year: "",
count: ""
}
/*
year: "",
count: "",
rowYear: function () {
return "<tr><td>" + years[i] + "</td><td>" + count[i] + "</td></tr>";
}
*/
function addAppointment() {
const isDateValid = validDate()
let newAppointment = Object.create(appointment);
var startIndex = document.getElementById('startTime').selectedIndex;
var priority;
newAppointment.startTime = document.getElementById('startTime').options[startIndex].value;
newAppointment.subject = document.getElementById('subject').value;
newAppointment.venue = document.getElementById('venue').value;
if (isDateValid != false) { newAppointment.date = isDateValid; }
if (validTime != false) { newAppointment.endTime = validTime(); }
if (document.getElementById('medium').checked) { priority = medium.value; }
else if (document.getElementById('low').checked) { priority = low.value; }
else { priority = high.value; }
newAppointment.priority = priority;
if (isDateValid === null | isDateValid === undefined | validTime() === null | validTime() === undefined | validTime() === false | isDateValid === false | isConcurrentAppointment(newAppointment.date, newAppointment.startTime, newAppointment.endTime) != true) {
alert('Date or time entry invalid')
}
else {
list.push(newAppointment);
priArr.push(priority);
dates.push(isDateValid)
let tbody = document.getElementById("tbody");
tbody.innerHTML += newAppointment.rowData();
}
}
function validDate() {
var inputDate = document.getElementById('date').value
var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
if (inputDate.match(dateformat)) {
document.getElementById('date').focus();
var opera1 = inputDate.split('/');
var opera2 = inputDate.split('-');
lopera1 = opera1.length;
lopera2 = opera2.length;
if (lopera1 > 1) {
var pdate = inputDate.split('/');
}
else if (lopera2 > 1) {
var pdate = inputDate.split('-');
}
var dd = parseInt(pdate[0]);
var mm = parseInt(pdate[1]);
var yy = parseInt(pdate[2]);
if (yy <= MIN_YEAR) {
alert('Date is invalid.');
return error;
}
var daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (mm == 1 || mm > 2) {
if (dd > daysInMonths[mm - 1]) {
alert('Date is invalid.');
return error;
}
}
if (mm == 2) {
var lyear = false;
if ((!(yy % 4) && yy % 100) || !(yy % 400)) {
lyear = true;
}
if ((lyear == false) && (dd >= 29)) {
alert('Date is invalid');
return error;
}
if ((lyear == true) && (dd > 29)) {
alert('Date is invalid.');
return error;
}
}
}
else {
alert('Date is invalid.');
document.getElementById('date').focus();
return error;
}
return inputDate;
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function validTime() {
var startIndex = document.getElementById('startTime').selectedIndex;
var appStartTime = document.getElementById('startTime').options[startIndex].value;
var endIndex = document.getElementById('endTime').selectedIndex;
var endTime = document.getElementById('endTime').options[endIndex].value;
if (endTime <= appStartTime) {
alert("Appointment must end later than the start time.");
return error;
}
return endTime;
}
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function isConcurrentAppointment(dateInput, startInput, endInput) {
var i;
for (i = 0; i < list.length; i++) {
if (dateInput == list[i].date) {
if (startInput.substring(0, 3) == list[i].startTime.substring(0, 3)
|| startInput.substring(0, 3) < list[i].startTime.substring(0, 3) && endInput.substring(0, 3) > list[i].endTime.substring(0, 3)
|| startInput.substring(0, 3) == list[i].startTime.substring(0, 3) && endInput.substring(0, 3) >= list[i].endTime.substring(0, 3)
|| startInput.substring(0, 3) > list[i].startTime.substring(0, 3) && endInput.substring(0, 3) > list[i].endTime.substring(0, 3) && startInput.substring(0, 3) < list[i].endTime.substring(0, 3)
|| startInput.substring(0, 3) > list[i].startTime.substring(0, 3) && endInput.substring(0, 3) < list[i].endTime.substring(0, 3)
|| startInput.substring(0, 3) < list[i].startTime.substring(0, 3) && endInput.substring(0, 3) < list[i].endTime.substring(0, 3) && endTime.substring(0, 3) > list[i].startTime.substring(0, 3)
|| startInput.substring(0, 3) >= list[i].endTime.substring(0, 3) && endInput.substring(0, 3) <= list[i].endTime.substring(0, 3)
|| startInput.substring(0, 3) > list[i].startTime.substring(0, 3) && endInput.substring(0, 3) == list[i].endTime.substring(0, 3)
|| startInput.substring(0, 3) == list[i].startTime.substring(0, 3) && endInput.substring(0, 3) == list[i].endTime.substring(0, 3)
|| startInput.substring(0, 3) < list[i].startTime.substring(0, 3) && endInput.substring(0, 3) == list[i].endTime.substring(0, 3)) {
alert('Appointments cannot start of end while another appointment is running');
return false
}
}
else
return true
}
return true
}
//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Tallying function:
var i = 0;
var count = 0;
var output = '';
var tally = new Array();
// Tally of years
function summary(year) {
var val = document.getElementById('tallyOption').value
if (val == 'year') {
thead1.innerHTML = ("<td>" + 'Year' + "</td>" + "<td>" + 'Appointments' + "</td>");
for (i = 0; i < years.length; i++) {
tally[i] = 0;
}
for (i = 0; i < dates.length; i++) {
var year = dates[i].toString().split('/')
var year = parseInt(year[2]);
if (years.indexOf(year) == -1) {
years.push(year);
tally[i] = 1;
}
else {
tally[i] +=1;
}
}
output += '<table border="1">';
output += '<tr><th>Years</th><th>Tally</th></tr>';
for (i = 0; i < years.length; i++) {
output += '<tr><td>' + years[i] + '</td><td>';
for (var j = 0; j < tally[i]; j++) {
output += '$';
}
output += '</td></tr>';
}
output += '</table>';
document.writeln(output);
return year;
return count;
}
//Tallying Dates?
}
</script>
</head>
<body>
<title>Diary</title>
<h1 style="text-align: center;">Diary</h1>
<form>
<table bgcolor="#cccccc" cellpadding="5" cellspacing="0" align="center">
<tr>
<td align="right">Date</td>
<td><input type="text" id="date" name="date" size="10"></td>
<td align="right">Start Time</td>
<td>
<select id="startTime">
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
</select>
</td>
<td align="right">End Time</td>
<td>
<select id="endTime">
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
</select>
</td>
</tr>
<tr>
<td align="right">Subject:</td>
<td><input type="text" id="subject" size="10"></td>
</tr>
<tr>
<td align="right">Venue:</td>
<td><input type="text" id="venue" size="10"></td>
</tr>
<tr>
<td valign="top" align="center">Priority</td>
<td><input type="radio" id="high" name="Priority" value="High" checked="true" /> High<br />
<td><input type="radio" id="medium" name="Priority" value="Medium" /> Medium<br />
<td><input type="radio" id="low" name="Priority" value="Low" /> Low<br />
</td>
</tr>
</table>
<tr>
<div style="text-align:center;">
<td></td>
<td></td><input type="button" value="Add Appointment" onclick="addAppointment()" /></td>
</div>
</tr>
<hr>
<div>
<table align="center" width="80%" height="150px" cellpadding="1px" cellspacing="1px" border="1" id="table1">
<thead>
<tr>
<th width="50">Date</th>
<th width="20">Start</th>
<th width="20">End</th>
<th width="75">Subject</th>
<th width="60">Venue</th>
<th width="5">Priority</th>
</tr>
</thead>
<tbody id="tbody"> </tbody>
</table>
</div>
<tr>
<td></td>
<div style="text-align:center;">
<td></td><input type="reset" value="Randomise Appointments" onclick="shuffleAppointments()" /></td>
<td></td><input type="button" value="Sort Appointments" onclick="sortRecords()" /></td>
<td>by</td>
<td>
<select id="Date">
<option value="date">Date</option>
<option value="startTime">Start Time</option>
<option value="endTime">End Time</option>
<option value="subject">Subject</option>
<option value="venue">Venue</option>
<option value="priority">Priority</option>
</select>
</div>
</td>
</tr>
<hr>
<div>
<table border="1">
<thead id="thead1">
</thead>
<tbody id="tbody2"></tbody>
</table>
</div>
<div style="text-align:left;">
<td></td><input type="button" value="Summary" onclick="summary()" /></td>
<td>by</td>
<td>
<select id="tallyOption">
<option value="year">Year</option>
<option value="date">Date</option>
<option value="optPriority">Priority</option>
</select>
</div>
</hr>
</form>
1 个解决方案
解决方案1
1 已采纳 2020-10-05 11:53:58
Change your summary function to将您的汇总功能更改为
function summary() {
var year;
var val = document.getElementById('tallyOption').value
if (val == 'year') {
thead1.innerHTML = ("<td>" + 'Year' + "</td>" + "<td>" + 'Appointments' + "</td>");
for (i = 0; i < dates.length; i++) {
const date = new Date(dates[i])
const year = date.getFullYear()
if (!yearSum[year]) {
yearSum[year] = 1
} else {
yearSum[year] = yearSum[year] + 1
}
}
output += '<table border="1">';
output += '<tr><th>Years</th><th>Tally</th></tr>';
const keys = Object.keys(yearSum)
const values = Object.values(yearSum)
for (i = 0; i < keys.length; i++) {
output += '<tr><td>' + keys[i] + '</td><td>';
output += values[i]
output += '</td></tr>';
}
output += '</table>';
document.writeln(output);
return year;
return count;
}
//Tallying Dates?
}
and declare yearSum as并声明 yearSum 为
const yearSum = {}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JavaScript将2D数组打印到HTML表中 - JavaScript printing 2D array into HTML table
通过JavaScript将数组打印到表中 - Printing array into table through javascript
HTML表到数组javascript - HTML table to array javascript
Javascript数组到HTML表 - Javascript array to html table
使用Lodash在HTML表中打印数组？ - Printing Array in HTML Table Using Lodash?
使用JavaScript数组到html表 - Array to html table using javascript
将HTML表转换为数组（JavaScript） - Convert HTML table to Array (JavaScript)
在html表中显示javascript数组 - display javascript array in html table
来自Javascript数组的HTML表 - Html table from Javascript array
Javascript 数组未显示在 HTML 表中 - Javascript array not displayed in HTML table
相关标签