jquery는 테이블 내용을 검색합니까?

테이블은 웹 애플리케이션을 작성할 때 데이터를 표시하는 일반적인 방법입니다. 이러한 테이블에는 많은 양의 데이터가 포함되어 있어 사용자가 자신의 요구 사항에 맞는 특정 데이터를 필터링하기 위해 검색해야 하는 경우가 많습니다. 이를 위해 jQuery를 사용하여 테이블 검색 기능을 구현할 수 있습니다.

먼저 HTML로 테이블을 만들고 여기에 헤더와 데이터 행을 추가해야 합니다.

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

다음으로 검색 기능을 구현하기 위해 jQuery 코드를 작성해야 합니다. 먼저 테이블 내용을 배열로 변환하고 변수에 저장합니다:

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

이 코드에서는 jQuery의 각 메서드를 사용하여 테이블의 각 행을 반복하고 이를 3가지 속성(이름, 나이)이 있는 배열로 변환합니다. , 성별). 그 중 eq 메소드를 사용하여 각 셀의 인덱스 값을 가져오고, text 메소드를 사용하여 셀의 텍스트 내용을 가져왔습니다.

다음으로, 사용자가 입력한 키워드를 기반으로 테이블 데이터를 필터링하는 검색 기능을 작성할 수 있습니다. 이 함수에서는 배열의 특정 요소를 찾는 데 사용할 수 있는 jQuery의 grep 메서드를 사용했습니다.

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

이 코드에서는 toLowerCase 메서드를 사용하여 키워드와 테이블 데이터를 소문자로 변환하여 대소문자를 구현했습니다. -민감한 검색. 그런 다음 indexOf 메소드를 사용하여 키워드가 포함된 테이블 데이터를 찾습니다.

마지막으로 검색 기능을 호출하고 사용자가 키워드를 입력할 때 테이블 내용을 업데이트하도록 이벤트 핸들러를 바인딩해야 합니다.

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

이 코드에서는 keyup 이벤트를 사용하여 사용자 입력을 수신하고 텍스트 키워드를 가져옵니다. 상자에. 그런 다음 검색 기능을 호출하여 필터링된 테이블 데이터를 가져오고 테이블 내용을 업데이트하기 위해 이를 HTML 코드로 변환합니다.

요약하자면, jQuery를 사용하여 키워드 기반 테이블 검색 기능을 구현하는 코드를 작성했습니다. 이러한 방식으로 사용자는 특정 데이터를 쉽게 찾을 수 있어 시스템 유용성과 사용자 경험이 향상됩니다.

위 내용은 jquery는 테이블 내용을 검색합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!