js怎么做课表

使用JavaScript制作课表的三大关键步骤是：创建数据结构、生成HTML表格、添加交互功能。 在本文中，我们将详细探讨这三个步骤，并提供完整的代码示例，帮助你快速上手。

一、创建数据结构

课表的核心是数据结构。在JavaScript中，我们可以使用数组和对象来存储课程信息。以下是一个示例数据结构：

const schedule = [
  { day: 'Monday', time: '09:00-10:00', subject: 'Mathematics' },
  { day: 'Monday', time: '10:00-11:00', subject: 'Physics' },
  { day: 'Tuesday', time: '09:00-10:00', subject: 'Chemistry' },
  // 其他课程
];

二、生成HTML表格

接下来，我们需要将数据结构转换为HTML表格。在这个步骤中，我们将使用DOM操作来创建表格元素，并将课程信息插入到表格中。

function generateTable(schedule) {
  const table = document.createElement('table');
  const header = table.insertRow();
  // 添加表头
  const days = ['Time', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
  days.forEach(day => {
    const th = document.createElement('th');
    th.innerText = day;
    header.appendChild(th);
  });
  // 添加课程信息
  schedule.forEach(item => {
    let row = table.querySelector(`tr[data-time="${item.time}"]`);
    if (!row) {
      row = table.insertRow();
      row.setAttribute('data-time', item.time);
      const timeCell = row.insertCell();
      timeCell.innerText = item.time;
    }
    const dayIndex = days.indexOf(item.day);
    const cell = row.insertCell(dayIndex);
    cell.innerText = item.subject;
  });
  document.body.appendChild(table);
}
generateTable(schedule);

三、添加交互功能

为了让课表更加实用，我们可以添加一些交互功能，比如课程的增删改查。以下是一个简单的示例，展示如何通过表单添加新课程。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Course Schedule</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #000;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <form id="courseForm">
    <label for="day">Day:</label>
    <select id="day">
      <option value="Monday">Monday</option>
      <option value="Tuesday">Tuesday</option>
      <option value="Wednesday">Wednesday</option>
      <option value="Thursday">Thursday</option>
      <option value="Friday">Friday</option>
    </select>
    <label for="time">Time:</label>
    <input type="time" id="time">
    <label for="subject">Subject:</label>
    <input type="text" id="subject">
    <button type="submit">Add Course</button>
  </form>
  <script>
    const schedule = [
      { day: 'Monday', time: '09:00-10:00', subject: 'Mathematics' },
      { day: 'Monday', time: '10:00-11:00', subject: 'Physics' },
      { day: 'Tuesday', time: '09:00-10:00', subject: 'Chemistry' },
    ];
    function generateTable(schedule) {
      const table = document.createElement('table');
      const header = table.insertRow();
      const days = ['Time', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
      days.forEach(day => {
        const th = document.createElement('th');
        th.innerText = day;
        header.appendChild(th);
      });
      schedule.forEach(item => {
        let row = table.querySelector(`tr[data-time="${item.time}"]`);
        if (!row) {
          row = table.insertRow();
          row.setAttribute('data-time', item.time);
          const timeCell = row.insertCell();
          timeCell.innerText = item.time;
        }
        const dayIndex = days.indexOf(item.day);
        const cell = row.insertCell(dayIndex);
        cell.innerText = item.subject;
      });
      document.body.appendChild(table);
    }
    function addCourse(event) {
      event.preventDefault();
      const day = document.getElementById('day').value;
      const time = document.getElementById('time').value;
      const subject = document.getElementById('subject').value;
      schedule.push({ day, time, subject });
      document.querySelector('table').remove();
      generateTable(schedule);
    }
    document.getElementById('courseForm').addEventListener('submit', addCourse);
    generateTable(schedule);
  </script>
</body>
</html>

四、优化和扩展

1. 数据持久化

为了使课表数据在页面刷新后仍然存在，可以使用浏览器的localStorage来存储数据。

function saveSchedule(schedule) {
  localStorage.setItem('schedule', JSON.stringify(schedule));
}
function loadSchedule() {
  const savedSchedule = localStorage.getItem('schedule');
  return savedSchedule ? JSON.parse(savedSchedule) : [];
}

2. 美化表格

使用CSS可以让课表看起来更加美观。例如，可以添加以下CSS样式：

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f4f4f4;
}

3. 添加删除功能

可以为每个课程添加一个删除按钮，并实现删除功能。

function generateTable(schedule) {
  const table = document.createElement('table');
  const header = table.insertRow();
  const days = ['Time', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
  days.forEach(day => {
    const th = document.createElement('th');
    th.innerText = day;
    header.appendChild(th);
  });
  schedule.forEach((item, index) => {
    let row = table.querySelector(`tr[data-time="${item.time}"]`);
    if (!row) {
      row = table.insertRow();
      row.setAttribute('data-time', item.time);
      const timeCell = row.insertCell();
      timeCell.innerText = item.time;
    }
    const dayIndex = days.indexOf(item.day);
    const cell = row.insertCell(dayIndex);
    cell.innerText = item.subject;
    const deleteButton = document.createElement('button');
    deleteButton.innerText = 'Delete';
    deleteButton.onclick = () => {
      schedule.splice(index, 1);
      saveSchedule(schedule);
      document.querySelector('table').remove();
      generateTable(schedule);
    };
    cell.appendChild(deleteButton);
  });
  document.body.appendChild(table);
}

五、总结

通过上述步骤，你可以使用JavaScript创建一个功能丰富的课表。首先，创建数据结构以存储课程信息；其次，生成HTML表格以展示课程；最后，添加交互功能以便用户可以添加和删除课程。 你还可以通过数据持久化、美化表格和扩展功能来进一步优化和扩展课表。

希望这篇文章能对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。