JavaScript를 사용하여 테이블 필터링 기능 구현

JavaScript를 사용하여 테이블 필터링 기능 구현

인터넷 기술의 지속적인 발전으로 테이블은 웹 페이지에 데이터를 표시하는 일반적인 방법이 되었습니다. 그러나 데이터의 양이 방대할 경우 사용자는 특정 데이터를 찾는 데 어려움을 겪는 경우가 많습니다. 따라서 사용자가 필요한 데이터를 빠르게 찾을 수 있도록 테이블에 필터링 기능을 추가하는 것은 많은 웹 디자인의 요구 사항이 되었습니다. 이 기사에서는 JavaScript를 사용하여 테이블 필터링 기능을 구현하는 방법을 소개합니다.

먼저 데이터 테이블이 필요합니다. 다음은 간단한 예입니다.

<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>男</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

다음으로 사용자가 필터 조건을 입력할 수 있는 입력 상자가 필요합니다. 다음 코드를 사용하여 입력 상자를 추가합니다.

<input type="text" id="filter-input" placeholder="输入筛选条件">

그런 다음 테이블의 필터링 기능을 구현하는 JavaScript 코드를 작성해야 합니다. 코드는 다음과 같습니다.

// 获取数据表格和筛选输入框
const table = document.querySelector('#data-table');
const filterInput = document.querySelector('#filter-input');

// 监听筛选输入框的输入事件
filterInput.addEventListener('input', () => {
  const filterValue = filterInput.value.toLowerCase(); // 获取输入框的值并转为小写

  // 获取表格中的所有行
  const rows = table.getElementsByTagName('tr');

  // 遍历表格中的每一行，并根据筛选条件显示/隐藏行
  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    const dataCells = row.getElementsByTagName('td');
    let shouldShowRow = false;

    // 遍历当前行的每个单元格，检查是否有匹配的值
    for (let j = 0; j < dataCells.length; j++) {
      const cell = dataCells[j];
      const cellValue = cell.textContent.toLowerCase();

      // 如果单元格的值与筛选条件匹配，显示该行
      if (cellValue.includes(filterValue)) {
        shouldShowRow = true;
      }
    }

    // 根据shouldShowRow的值，显示/隐藏行
    if (shouldShowRow) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  }
});

이제 사용자가 입력 상자에 필터 조건을 입력하면 테이블은 조건에 따라 해당 행을 표시하거나 숨깁니다.

이 글에서는 JavaScript를 사용하여 테이블 필터링 기능을 구현하는 방법을 소개합니다. 필터 입력 상자를 추가하고 해당 JavaScript 코드를 작성하면 사용자가 테이블에서 특정 데이터를 쉽게 찾을 수 있습니다. 이는 대규모 테이블의 데이터 표시 및 쿼리에 매우 실용적인 가치가 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 JavaScript를 사용하여 테이블 필터링 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!