返回
JavaScript 课程表:按时间顺序排列课程
IOS
2024-10-01 10:19:41
在设计课程表界面时,课程的排列顺序对用户体验至关重要。如果课程没有按照时间先后顺序排列,用户在查看和管理课程时就会感到困惑,甚至可能错过重要的课程信息。你遇到的问题是,尽管课程能够成功添加到表格中,但它们的顺序并不是按照开始时间排列的,这的确会影响用户的使用体验。
解决这个问题的核心在于对课程数据进行排序。在将课程信息添加到表格之前,我们需要先根据课程的开始时间对它们进行排序。JavaScript 提供了强大的排序功能,可以帮助我们轻松实现这个目标。
下面,我们来详细讲解如何修改你的 JavaScript 代码,让课程表按照时间顺序展示课程:
function aggiungiMateria() {
// ... 获取课程信息代码 ...
// 1. 获取当天所有课程并存储到数组中
if (orariJSON[giorno]) {
var lezioni = [];
for (var materia in orariJSON[giorno]) {
lezioni.push({
materia: materia,
inizio: orariJSON[giorno][materia].inizio,
fine: orariJSON[giorno][materia].fine
});
}
// 2. 使用 sort() 方法按开始时间对课程进行排序
lezioni.sort(function(a, b) {
return a.inizio.localeCompare(b.inizio);
});
// 3. 清空表格中该天的课程
var table = document.getElementById("orariTable");
for (var i = table.rows.length - 1; i > 0; i--) {
var row = table.rows[i];
if (row.cells[0].innerHTML.trim() === giorno) {
table.deleteRow(i);
}
}
// 4. 重新添加排序后的课程
var firstRow = table.insertRow(-1); // 创建该天的第一行
firstRow.insertCell(0).innerHTML = giorno;
firstRow.cells[0].rowSpan = lezioni.length; // 设置 rowspan 属性
for (var i = 0; i < lezioni.length; i++) {
var row = table.insertRow(-1); // 为每节课创建新行
row.insertCell(0).style.display = "none"; // 隐藏除第一行外的日期单元格
row.insertCell(1).innerHTML = lezioni[i].materia;
row.cells[1].classList.add("materie-col");
row.insertCell(2).innerHTML = lezioni[i].inizio;
row.insertCell(3).innerHTML = lezioni[i].fine;
}
} else {
// ... 如果该天没有课程,则按原逻辑添加 ...
}
// ... 其余代码 ...
}
代码分析:
- 获取当天课程并存储: 我们首先检查
orariJSON
对象中是否存在当天(giorno
)的课程数据。如果存在,则遍历该天的所有课程,并将每个课程的名称、开始时间和结束时间存储在一个名为lezioni
的数组中。 - 按开始时间排序: 利用 JavaScript 数组的
sort()
方法,我们传入一个自定义的比较函数。这个函数使用localeCompare()
方法比较两个课程的开始时间字符串,确保按照时间顺序进行排序。 - 清空表格中该天的课程: 为了避免重复显示课程,我们需要在添加排序后的课程之前,先清空表格中当天已有的课程行。我们通过遍历表格行,找到属于当天的行并将其删除。
- 重新添加排序后的课程: 首先,我们为当天创建一个新的表格行,并在第一个单元格中显示日期。然后,我们使用
rowSpan
属性将该单元格的跨度设置为当天课程的数量,这样日期就只会显示在第一行。接着,我们遍历排序后的lezioni
数组,为每节课创建新的表格行,并在相应的单元格中填充课程名称、开始时间和结束时间。为了避免日期重复显示,我们将除第一行外的日期单元格的display
属性设置为none
,将其隐藏起来。
通过以上修改,你的 aggiungiMateria()
函数就能按照时间顺序将课程添加到表格中了。每次添加或更新课程后,表格都会自动重新排序,为用户提供一个清晰、易于理解的课程表界面。
常见问题解答:
localeCompare()
方法有什么作用?localeCompare()
方法用于比较两个字符串,并根据当前语言环境的排序规则返回一个数字。在排序时间字符串时,使用localeCompare()
可以确保时间格式被正确解析和排序,例如 "08:00" 会排在 "10:00" 之前。- 为什么要清空表格中该天的课程? 在重新添加排序后的课程之前清空表格中该天的课程是为了避免课程重复显示。如果不进行清空操作,新的课程会添加到旧课程的下方,导致表格内容混乱。
rowSpan
属性的作用是什么?rowSpan
属性用于设置表格单元格的垂直跨度,即该单元格占据的行数。在课程表中,我们将日期单元格的rowSpan
设置为当天课程的数量,这样日期就只会显示在第一行,而不会在每节课都重复显示。- 如何处理没有课程的情况? 如果
orariJSON
对象中不存在当天(giorno
)的课程数据,说明当天没有课程安排。你可以选择在表格中添加一行提示信息,例如“当天没有课程”,或者保持表格为空。 - 如何修改代码以实现降序排列? 如果需要按照课程结束时间降序排列,只需要修改
lezioni.sort()
方法中的比较函数,将a.inizio.localeCompare(b.inizio)
改为b.fine.localeCompare(a.fine)
即可。
希望以上解答能够帮助你更好地理解和应用这段代码,构建一个用户友好的课程表界面。