SOURCE

let $teacherName = document.getElementById('teacher-name-input');
let $queryBtn = document.getElementById('query-btn');
let $clearBtn = document.getElementById('clear-btn');

function query() {
  clearTable();
  let i = 0;
  while (i < courses.length) {
    if ($teacherName.value === courses[i].JSM) {
      createRow(courses[i].KCH, courses[i].KXH, courses[i].KCM, courses[i].JSM);
    }
    i = i + 1;
  }
}

$queryBtn.onclick = query;
$clearBtn.onclick = clearTable;

<h1>
  5.循环：课程信息输出
</h1>
<div class="courses">
  <div class="toolbar">
    <input id="teacher-name-input" placeholder="请输入教师名" class="el-input__inner"
    type="text">
    <button id="query-btn" class="el-button">
      查找
    </button>
    <button id="clear-btn" class="el-button">
      清空结果
    </button>
  </div>
  <table>
    <thead>
      <tr>
        <td>
          课程号
        </td>
        <td>
          课序号
        </td>
        <td>
          课程名
        </td>
        <td>
          教师名
        </td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

html {
  color: #606266;
}

body {
  padding: 20px;
}

body h1 {
  text-align: center;
}

.toolbar {
  margin: 20px 0 10px;
  display: flex;
}

.toolbar input {
  width: auto;
  flex: 1;
  margin-right: 10px;
}

.courses table {
  width: 100%;
  text-align: center;
}

thead {
  font-weight: bold;
  color: #909399;
}

td {
  border: 1px solid #DCDFE6;
}