[英]Why is my array not appending as a new row in my table? when it does it is undefined? JavaScript / HTML
So as shown below, in the console it gives my all the data that has been entered, however it will not display as a new row.因此,如下所示,在控制台中,它提供了我输入的所有数据,但它不会显示为新行。 If i move the second function/for loop into the first, it only displays each value as undefined, which seems like progress.
如果我将第二个函数/for 循环移动到第一个,它只会将每个值显示为未定义,这似乎是进步。 Why?
为什么? and how can i fix this issue?
我该如何解决这个问题? (also when everything is in one function, it goes from 1 row, to three each time the button is clicked to submit the data)
(同样,当所有内容都在一个函数中时,每次单击按钮提交数据时,它会从 1 行变为 3 行)
var list = [];
function addAppointment() {
var appointmentData = {};
var inputDate = document.getElementById('date').value;
appointmentData.date = inputDate;
var inputStartTime = document.getElementById('startTime').selectedIndex;
appointmentData.startTime = inputStartTime;
var inputEndTime = document.getElementById('endTime').selectedIndex;
appointmentData.endTime = inputEndTime;
var inputSubject = document.getElementById('subject');
appointmentData.subject = inputSubject;
var inputVenue = document.getElementById('venue');
appointmentData.venue = inputVenue;
list.push(appointmentData);
}
console.log("list", list)
function addData(data) {
console.log(data)
const tbody = document.getElementById("tbody");
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = `
<td>${data[i].inputDate}</td>
<td>${data[i].inputStartTime}</td>
<td>${data[i].inputEndTime}</td>
<td>${data[i].inputSubject}</td>
<td>${data[i].inputVenue}</td>
`;
tbody.append(tr);
}
addData(list);
}
</script>
<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="date" id="date" size="10" min="2020-01-01"></td>
<td align="right">Start Time</td>
<td>
<select id="startTime">
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="05:00">05:00</option>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<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>
<option value="19:00">19:00</option>
<option value="20:00">20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
<option value="23:00">23:00</option>
</select>
</td>
<td align="right">End Time</td>
<td>
<select id="endTime">
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="05:00">05:00</option>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<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>
<option value="19:00">19:00</option>
<option value="20:00">20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
<option value="23:00">23: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" checked />High<br />
<td><input type="radio" id="medium" name="Priority" checked />Medium<br />
<td><input type="radio" id="low" name="Priority" checked />Low<br />
</td>
</tr>
</table>
<tr>
<td></td>
<td></td><input type="button" value="Add Appointment" onclick="addAppointment()" /></td>
</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>
<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>
</td>
</tr>
<hr>
<table>
<th width="50">Date</th>
<th width="20">Year</th>
<th width="20">Appointment</th>
</hr>
</table>
</form>
did you run addAppointment()
first?你先运行了
addAppointment()
吗? It also looks like you are calling addData(list)
within the addData definition, is this on purpose?看起来您也在 addData 定义中调用
addData(list)
,这是故意的吗?
I recon this would do it:我认为这会做到:
fucntion addAppointment (){
var list = [];
function getDataFromSubmit() {
var appointmentData = {};
var inputDate = document.getElementById('date').value;
appointmentData.date = inputDate;
var inputStartTime = document.getElementById('startTime').selectedIndex;
appointmentData.startTime = inputStartTime;
var inputEndTime = document.getElementById('endTime').selectedIndex;
appointmentData.endTime = inputEndTime;
var inputSubject = document.getElementById('subject');
appointmentData.subject = inputSubject;
var inputVenue = document.getElementById('venue');
appointmentData.venue = inputVenue;
list.push(appointmentData);
}
function addData(data) {
console.log(data)
const tbody = document.getElementById("tbody");
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = `
<td>${data[i].inputDate}</td>
<td>${data[i].inputStartTime}</td>
<td>${data[i].inputEndTime}</td>
<td>${data[i].inputSubject}</td>
<td>${data[i].inputVenue}</td>
`;
tbody.append(tr);
}
}
getDataFromSubmit()
console.log("list", list)
addData(list);
}
Review this bit:回顾这一点:
var inputDate = document.getElementById('date').value;
appointmentData.date = inputDate;
var inputStartTime = document.getElementById('startTime').selectedIndex;
appointmentData.startTime = inputStartTime;
var inputEndTime = document.getElementById('endTime').selectedIndex;
appointmentData.endTime = inputEndTime;
var inputSubject = document.getElementById('subject');
appointmentData.subject = inputSubject;
var inputVenue = document.getElementById('venue');
appointmentData.venue = inputVenue;
selectedIndex on a SELECT element will return a number, so inputStartTime/inputEndTime will be numbers not times. SELECT 元素上的 selectedIndex 将返回一个数字,因此 inputStartTime/inputEndTime 将是数字而不是时间。 Change .selectedIndex to .value
将 .selectedIndex 更改为 .value
inputSubject and inputVenue both point to elements NOT their values. inputSubject 和 inputVenue 都指向元素而不是它们的值。 So, add .value to the end of both.
因此,将 .value 添加到两者的末尾。
Try this script instead:试试这个脚本:
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></tr>";
}
}
function addAppointment() {
let thisAppointment = Object.create(appointment);
thisAppointment.date = document.getElementById('date').value;
thisAppointment.startTime = document.getElementById('startTime').value;
thisAppointment.endTime = document.getElementById('endTime').value;
thisAppointment.subject = document.getElementById('subject').value;
thisAppointment.venue = document.getElementById('venue').value;
list.push(thisAppointment);
let tbody = document.getElementById("tbody");
tbody.innerHTML += thisAppointment.rowData();
}
This creates an object called appointment and defines some properties for it - including a function to output the tr/td row data.这将创建一个名为约会的对象并为其定义一些属性 - 包括一个输出 tr/td 行数据的函数。
The addAppointment() function creates a new instance of this object, populates it with the new data and updates the innerHTML of the "tbody" element with the rowData() value. addAppointment() 函数创建这个对象的一个新实例,用新数据填充它,并用 rowData() 值更新“tbody”元素的 innerHTML。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.