티스토리 뷰

🌈 JavaScript

테이블 필터 검색 기능(Table Filter)

James Wetzel 2023. 10. 10. 14:21
728x90
반응형
<!DOCTYPE html>
<html>
<head>
  <style>
    /* Optional CSS for styling the table and input field */
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>

<input type="text" id="filterInput" oninput="filterRows()" placeholder="Filter by keyword">

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr class="filterable">
      <td>John</td>
      <td>30</td>
    </tr>
    <tr class="filterable">
      <td>Alice</td>
      <td>25</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>
function filterRows() {
  const keyword = document.getElementById("filterInput").value.toLowerCase();
  const rows = document.getElementsByClassName("filterable");

  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    const cells = row.getElementsByTagName("td");
    let shouldShow = false;

    for (let j = 0; j < cells.length; j++) {
      const cell = cells[j];
      const cellText = cell.textContent.toLowerCase();
      
      // Check if the cell's text starts with the keyword
      if (cellText.includes(keyword)) {
        shouldShow = true;
        break;
      }
    }

    row.style.display = shouldShow ? "" : "none";
  }
}
filterRows: function () {
        const keyword = $("#txt_gridBranchSku_search_value").val().toLowerCase();
        const odd_rows = $("#__grid_gridBranchSku .odd_dhx_web");
        const even_rows = $("#__grid_gridBranchSku .ev_dhx_web");

        for (const row of odd_rows) {
            const cells = row.getElementsByTagName("td");
            let should_show = false;

            for (const cell of cells) {
                if (cell.textContent.toLowerCase().includes(keyword)) {
                    should_show = true;
                    break;
                }
            }

            row.style.display = should_show ? "" : "none";
        }

        for (const row of even_rows) {
            const cells = row.getElementsByTagName("td");
            let should_show = false;

            for (const cell of cells) {
                if (cell.textContent.toLowerCase().includes(keyword)) {
                    should_show = true;
                    break;
                }
            }

            row.style.display = should_show ? "" : "none";
        }
    },
728x90
반응형
저작자표시