jquery 쿼리 테이블 중앙값

웹 개발에서 테이블은 공통적이고 중요한 요소입니다. 테이블 데이터를 쿼리하고 필터링하는 방법은 일반적인 요구 사항입니다. jQuery는 다양한 선택기와 DOM 조작 방법을 제공하는 매우 강력한 JavaScript 라이브러리입니다. 이 기사에서는 jQuery를 사용하여 테이블의 값을 쿼리하는 방법을 소개합니다.

1. 테이블의 데이터 가져오기

테이블의 값을 쿼리하려면 먼저 테이블의 데이터를 가져와야 합니다. jQuery를 사용하면 테이블의 데이터를 쉽게 가져올 수 있습니다.

HTML 코드는 다음과 같습니다.

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>20</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

jQuery를 사용하여 테이블 데이터를 얻는 코드는 다음과 같습니다.

var tableData = [];
$("#myTable tbody tr").each(function() {
  var rowData = [];
  $(this).find("td").each(function() {
    rowData.push($(this).text());
  });
  tableData.push(rowData);
});
console.log(tableData);

파싱 코드: 먼저 빈 배열 tableData를 정의한 다음 Each() 메서드를 사용하여 각 행을 순회합니다(tr ) 테이블의 각 행에 대해 그런 다음 find() 메서드를 사용하여 행의 각 셀(td)을 탐색하고 셀의 텍스트 내용을 rowData 배열에 추가합니다. 마지막으로 rowData 배열이 tableData 배열에 추가되어 각 하위 배열이 테이블의 데이터 행을 나타내는 2차원 배열을 얻습니다.

2. 테이블의 데이터 쿼리

테이블의 데이터 쿼리에는 일반적으로 행별 쿼리와 열별 쿼리라는 두 가지 측면이 포함됩니다. 이 두 가지 쿼리 방법은 아래에서 자세히 소개됩니다.

2.1 행별 쿼리

행별 쿼리는 테이블의 열 값을 기준으로 데이터의 행을 쿼리하는 것을 의미합니다. 예를 들어, 위 테이블에서 "런던"에 거주하는 모든 사람에 대한 정보를 쿼리하려고 합니다.

HTML 코드는 다음과 같습니다.

<input type="text" id="searchInput">
<button id="searchBtn">Search</button>
<table id="myTable">
  <!-- 同上 -->
</table>

jQuery를 사용하여 행별로 쿼리하는 코드는 다음과 같습니다.

$("#searchBtn").click(function() {
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var found = false;
    $(this).each(function() {
      if ($(this).text().toLowerCase().indexOf(searchText) >= 0) {
        found = true;
        return false;
      }
    });
    if (found) $(this).show();
    else $(this).hide();
  });
});

파싱 코드: 먼저 검색에 사용된 텍스트 상자의 값을 가져온 후 후속 비교를 용이하게 하기 위해 소문자로 변환합니다. . 그런 다음 테이블의 각 행을 순회한 후 각 셀을 순회하여 셀의 값에 검색 텍스트 상자의 키워드가 포함되어 있는지 확인합니다. 발견되면 행을 표시하고, 그렇지 않으면 행을 숨깁니다.

2.2 컬럼별 쿼리

컬럼별 쿼리는 테이블의 특정 행의 데이터를 쿼리하는 것을 의미합니다. 예를 들어, 위의 테이블에서 25세 이상의 모든 사람의 정보를 쿼리하려고 합니다.

HTML 코드는 위와 동일합니다.

jQuery를 이용하여 컬럼별로 쿼리하는 코드는 다음과 같습니다.

$("#searchBtn").click(function() {
  var columnIndex = 1; //查询年龄这一列
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var tdValue = $(this).find("td:eq(" + columnIndex + ")").text();
    if (parseInt(tdValue) > parseInt(searchText)) $(this).show();
    else $(this).hide();
  });
});

코드 파싱: 먼저 쿼리할 컬럼의 인덱스(columnIndex)를 age 컬럼인 1로 정의합니다. 그런 다음 검색 텍스트 상자의 값을 가져와서 소문자로 변환합니다. 테이블의 각 행을 순회하고, eq() 메소드를 통해 각 행의 해당 열의 값을 얻은 후, 이를 비교하기 위한 정수형으로 변환하고(parseInt() 메소드를 통해). 조건이 충족되면 데이터 행이 표시되고, 그렇지 않으면 데이터 행이 숨겨집니다.

3. 요약

이 문서에서는 jQuery를 사용하여 행별 쿼리 및 열별 쿼리를 포함하여 테이블의 데이터를 쿼리하는 방법을 소개합니다. jQuery의 선택자와 DOM 작업 방법을 통해 테이블 ​​데이터를 쉽게 쿼리하고 필터링할 수 있습니다. 테이블 데이터의 양이 많을 경우 쿼리 성능에 영향을 미칠 수 있으므로 쿼리 효율성을 높이기 위해서는 적절한 솔루션을 선택해야 합니다.

위 내용은 jquery 쿼리 테이블 중앙값의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!