typescript 模仿课堂练习的getStudentInfo函数，在前端页面上（非控制台）打印出10个ID所对应语文成绩的表格（表格字段包括ID、课程、成绩三列），调用函数在前端页面查询对应ID所在表格那一行的数据。

在 TypeScript 中，你可以创建一个模拟的 `getStudentInfo` 函数，并将其绑定到前端页面的事件处理程序，以便在用户交互时动态生成数据。首先，假设我们有一个包含学生信息的虚拟数据结构，我们可以创建一个简单的 HTML 表格模板，然后通过 JavaScript 或 TypeScript 来填充数据。

// 定义一个静态学生信息数组
interface Student {
  id: number;
  name: string;
  subject: '语文';
  score: number;
}

const students: Student[] = [
  { id: 1, name: '张三', subject: '语文', score: 95 },
  // 添加更多学生数据...
  { id: 10, name: '李四', subject: '语文', score: 85 },
];

// 模拟 getStudentInfo 函数
function getStudentInfo(studentIds: number[]): Record<string, any>[] {
  return studentIds.map((id) => {
    const matchingStudent = students.find((s) => s.id === id);
    if (matchingStudent) {
      return {
        ID: matchingStudent.id,
        课程: matchingStudent.subject,
        成绩: matchingStudent.score,
      };
    }
    return null; // 返回找不到的学生时显示默认值或错误提示
  });
}

// 假设我们在HTML中有一个表格元素和一个按钮触发查询
const tableBody = document.querySelector('#student-table tbody');
const button = document.querySelector('#query-button');

button.addEventListener('click', () => {
  const idsToQuery = Array.from({ length: 10 }, (_, i) => i + 1); // 获取前10个ID
  const data = getStudentInfo(idsToQuery);

  // 渲染数据到表格
  data.forEach((row) => {
    if (row) {
      const newRow = document.createElement('tr');
      newRow.innerHTML = `
        <td>${row.ID}</td>
        <td>${row.课程}</td>
        <td>${row.成绩}</td>
      `;
      tableBody.appendChild(newRow);
    } else {
      newRow.textContent = '未找到数据';
    }
  });
});