使用jQuery提取Excel数据并按需求在HTML中展示的技术实现求助

Hey there! 看了你目前的代码和需求，我明白你想实现高亮课程名、把视频链接做成可点击元素，还要按周分组课程的功能，咱们一步步来调整代码达到目标~

先梳理现有代码的不足 #

你目前的代码已经能读取Excel并展示基础的课程和高亮，但还没覆盖三个核心需求：

• 没有提取并处理视频链接
• 分组逻辑是按课程名，不是按周
• 没实现课程名高亮和链接可点击的样式/结构

修改后的完整实现代码 #

下面是整合了所有需求的完整代码，我会标注关键调整点：

HTML结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

<h2>Upload Excel File</h2>
<input type="file" id="uploadExcel" accept=".xlsx" />
<br><br>

<h3>Highlight Videos and Courses</h3>
<table id="highlightTable">
  <thead><tr><th>Type</th><th>Title</th></tr></thead>
  <tbody></tbody>
</table>

<h3>按周分组的课程</h3>
<div id="weeklyCourses"></div>

CSS样式

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
/* 高亮课程名样式 */
.highlight-course {
  font-weight: bold;
  color: #2c3e50;
  font-size: 1.1em;
}
/* 视频链接样式 */
.video-link {
  color: #3498db;
  text-decoration: none;
}
.video-link:hover {
  text-decoration: underline;
}
/* 周分组容器样式 */
.week-group {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}
/* 课程列表样式 */
.course-list {
  list-style-type: none;
  padding-left: 0;
}
.course-list li {
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

JavaScript逻辑

// 辅助函数：获取日期对应的周数（格式：第X周）
function getWeekNumber(date) {
  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  const dayNum = d.getUTCDay() || 7;
  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
  return `第${Math.ceil((((d - yearStart) / 86400000) + 1) / 7)}周`;
}

$('#uploadExcel').on('change', function (e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function (e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const sheet = workbook.Sheets[workbook.SheetNames[0]];
    const json = XLSX.utils.sheet_to_json(sheet, { header: 1 });

    // 处理高亮部分（保留你原来的逻辑）
    const highlights = [];
    for (let i = 0; i < 5; i++) {
      const row = json[i];
      if (!row) continue;
      for (let j = 0; j < row.length - 1; j++) {
        const key = row[j];
        const value = row[j + 1];
        if (key && value && key.includes("Highlight")) {
          highlights.push({ type: key.trim(), title: value.trim() });
        }
      }
    }
    $('#highlightTable tbody').empty();
    highlights.forEach(item => {
      $('#highlightTable tbody').append(`<tr><td>${item.type}</td><td>${item.title}</td></tr>`);
    });

    // 处理课程数据：提取课程名、日期、视频链接
    // 注意：row的索引请根据你的Excel实际列调整！这里假设视频链接在第7列（索引6）
    const courseData = json.slice(8).map(row => ({
      course: row[1],
      datetime: row[7],
      videoLink: row[6]
    })).filter(cd => cd.course && cd.datetime);

    // 按周分组课程
    const groupedByWeek = {};
    courseData.forEach(cd => {
      const date = new Date(cd.datetime);
      const week = getWeekNumber(date);
      if (!groupedByWeek[week]) {
        groupedByWeek[week] = [];
      }
      groupedByWeek[week].push(cd);
    });

    // 按周数排序分组
    const sortedWeeks = Object.entries(groupedByWeek).sort((a, b) => {
      const weekA = parseInt(a[0].replace('第', '').replace('周', ''));
      const weekB = parseInt(b[0].replace('第', '').replace('周', ''));
      return weekA - weekB;
    });

    // 渲染按周分组的课程
    $('#weeklyCourses').empty();
    sortedWeeks.forEach(([week, courses]) => {
      const weekDiv = $(`<div class="week-group"><h4>${week}</h4></div>`);
      const courseList = $('<ul class="course-list"></ul>');
      courses.forEach(course => {
        // 高亮课程名
        const highlightedCourse = `<span class="highlight-course">${course.course}</span>`;
        // 生成可点击的视频链接
        const videoLink = course.videoLink 
          ? `<a href="${course.videoLink}" target="_blank" class="video-link">观看视频</a>` 
          : '无视频链接';
        // 构建课程项
        const courseItem = $(`<li>${highlightedCourse}<br>时间: ${course.datetime}<br>${videoLink}</li>`);
        courseList.append(courseItem);
      });
      weekDiv.append(courseList);
      $('#weeklyCourses').append(weekDiv);
    });
  };
  reader.readAsArrayBuffer(file);
});

关键调整说明 #

1. 周分组功能：通过getWeekNumber函数将日期转换为统一的“第X周”格式，以此为key分组课程，再按周数排序保证顺序正确。
2. 高亮课程名：给课程名包裹<span class="highlight-course">，通过CSS设置加粗、深色字体实现高亮效果。
3. 可点击视频链接：判断视频链接是否存在，存在则生成带target="_blank"的<a>标签，点击会打开新窗口跳转。
4. 样式优化：给周分组和课程列表添加了简单的卡片样式，让界面更清晰易读。

注意事项 #

如果你的Excel列结构和假设的不一样（比如视频链接不在索引6），只需要修改courseData里videoLink: row[X]的X值即可，对应你Excel中视频链接所在的列索引。

内容来源于stack exchange