Angular实现表格筛选搜索栏：基于name属性过滤courseData数组

嘿，这就教你怎么给你的课程表格加上按名称筛选的搜索功能，步骤很简单，分HTML和JS两部分来弄：

1. 完善HTML结构 #

首先在表格上方加个搜索输入框，同时给表格加上<tbody>用来放动态渲染的课程数据，修改后的HTML如下：

<!-- 搜索栏 -->
<input type="text" id="courseSearch" placeholder="输入课程名称搜索..." style="padding: 8px; margin-bottom: 1rem; width: 300px;">

<!-- 课程表格 -->
<table style="border-spacing: 5rem;">
  <tr>
    <td style="font-size: 20px;">CRN</td>
    <td style="font-size: 20px;">Name</td>
    <td style="font-size: 20px;">Lecturer</td>
  </tr>
  <!-- 动态内容会放到这里 -->
  <tbody id="courseTableBody"></tbody>
</table>

2. 编写JavaScript筛选逻辑 #

接下来写JS代码，实现数据渲染和筛选功能。我先假设你的courseData是类似这样的结构（你直接替换成自己的真实数据就行）：

// 示例courseData数组
const courseData = [
  { CRN: "CS101", name: "Introduction to Computer Science", lecturer: "Dr. Smith" },
  { CRN: "MA202", name: "Linear Algebra", lecturer: "Prof. Johnson" },
  { CRN: "PH303", name: "Physics Mechanics", lecturer: "Dr. Lee" }
];

然后添加核心的渲染和筛选函数：

// 渲染表格数据的函数
function renderTable(data) {
  const tableBody = document.getElementById('courseTableBody');
  // 先清空现有内容
  tableBody.innerHTML = '';
  
  data.forEach(course => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td style="font-size: 16px;">${course.CRN}</td>
      <td style="font-size: 16px;">${course.name}</td>
      <td style="font-size: 16px;">${course.lecturer}</td>
    `;
    tableBody.appendChild(row);
  });
}

// 筛选函数
function filterCourses() {
  const searchInput = document.getElementById('courseSearch');
  const keyword = searchInput.value.toLowerCase().trim();
  
  // 筛选name包含关键词的课程，不区分大小写
  const filteredData = courseData.filter(course => 
    course.name.toLowerCase().includes(keyword)
  );
  
  // 重新渲染筛选后的表格
  renderTable(filteredData);
}

// 页面加载时先渲染全部数据
document.addEventListener('DOMContentLoaded', () => {
  renderTable(courseData);
  // 给搜索框添加输入监听，实时筛选
  document.getElementById('courseSearch').addEventListener('input', filterCourses);
});

功能说明 #

• 输入框实时响应：只要你在搜索框里输入内容，表格会立刻显示名称包含关键词的课程，完全不区分大小写
• 清空输入框就会自动回到全部课程的展示状态
• 代码里的样式你可以根据自己的需求调整，比如输入框的宽度、表格字体大小这些都能改

这样就能实现你要的简易筛选搜索功能啦！

内容的提问来源于stack exchange，提问作者l0veisreal