> 웹 프론트엔드 > JS 튜토리얼 > JavaScript를 사용하여 테이블 정렬 기능을 구현하는 방법은 무엇입니까?

JavaScript를 사용하여 테이블 정렬 기능을 구현하는 방법은 무엇입니까?

PHPz
풀어 주다: 2023-10-19 08:24:35
원래의
965명이 탐색했습니다.

如何使用 JavaScript 实现表格排序功能?

JavaScript를 사용하여 테이블 정렬 기능을 구현하는 방법은 무엇입니까?

현대 웹 개발에서 테이블은 데이터를 표시하는 일반적인 방법 중 하나입니다. 테이블 정렬은 사용자가 관련 데이터를 빠르게 찾을 수 있도록 도와주는 중요한 기능입니다. 이 기사에서는 JavaScript를 사용하여 테이블 정렬 기능을 구현하는 방법을 배우고 구체적인 코드 예제를 제공합니다.

1. 준비

먼저 데이터가 담긴 테이블이 필요합니다. 테이블에 "Name", "Age" 및 "City"라는 세 개의 열이 있다고 가정합니다. 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>22</td>
      <td>广州</td>
    </tr>
    <!-- 更多的数据行... -->
  </tbody>
</table>
로그인 후 복사

2. 테이블 정렬 구현

다음으로 JavaScript를 사용하여 테이블 정렬 기능을 구현하겠습니다.

먼저 테이블에 대한 참조를 가져와야 합니다. getElementById 메소드를 사용하여 테이블 요소를 가져올 수 있습니다. getElementById 方法来获得表格元素。

var table = document.getElementById("myTable");
로그인 후 복사

然后,我们需要为表格的每一列添加点击事件,当用户点击某一列的表头时,将触发排序函数。

var th = table.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
  th[i].addEventListener("click", function() {
    sortTable(table, i);
  });
}
로그인 후 복사

接下来,让我们实现排序函数 sortTable。该函数将接收两个参数,一个是表格元素,另一个是要排序的列的索引。

function sortTable(table, column) {
  var rows = Array.from(table.getElementsByTagName("tr"));

  rows.sort(function(a, b) {
    var cellA = a.getElementsByTagName("td")[column];
    var cellB = b.getElementsByTagName("td")[column];

    var valueA = cellA.innerText || cellA.textContent;
    var valueB = cellB.innerText || cellB.textContent;

    if (valueA < valueB) {
      return -1;
    } else if (valueA > valueB) {
      return 1;
    } else {
      return 0;
    }
  });

  for (var i = 0; i < rows.length; i++) {
    table.appendChild(rows[i]);
  }
}
로그인 후 복사

在这个排序函数中,我们首先使用了 Array.from 方法将 HTMLCollection 类型的表格行转换为数组。然后,我们使用 sort 方法来对数组进行排序。排序操作使用了 innerTexttextContent




  表格排序示例
  <script>
    function sortTable(table, column) {
      var rows = Array.from(table.getElementsByTagName("tr"));

      rows.sort(function(a, b) {
        var cellA = a.getElementsByTagName("td")[column];
        var cellB = b.getElementsByTagName("td")[column];

        var valueA = cellA.innerText || cellA.textContent;
        var valueB = cellB.innerText || cellB.textContent;

        if (valueA < valueB) {
          return -1;
        } else if (valueA > valueB) {
          return 1;
        } else {
          return 0;
        }
      });

      for (var i = 0; i < rows.length; i++) {
        table.appendChild(rows[i]);
      }
    }

    window.onload = function() {
      var table = document.getElementById(&quot;myTable&quot;);
      var th = table.getElementsByTagName("th");
      for (var i = 0; i < th.length; i++) {
        th[i].addEventListener("click", function() {
          sortTable(table, i);
        });
      }
    };
  </script>

姓名 年龄 城市
张三 25 北京
李四 30 上海
王五 22 广州
로그인 후 복사
그런 다음 테이블의 각 열에 클릭 이벤트를 추가해야 합니다. 사용자가 열의 헤더를 클릭하면 정렬 기능이 실행됩니다.

rrreee

다음으로 sortTable 정렬 함수를 구현해 보겠습니다. 이 함수는 두 개의 매개변수를 받습니다. 하나는 테이블 요소이고 다른 하나는 정렬할 열의 인덱스입니다.

rrreee

이 정렬 함수에서는 먼저 Array.from 메서드를 사용하여 HTMLCollection 유형의 테이블 행을 배열로 변환합니다. 그런 다음 sort 메서드를 사용하여 배열을 정렬합니다. 정렬 작업에서는 innerText 또는 textContent 속성을 ​​사용하여 테이블 셀의 텍스트 콘텐츠를 가져와 비교합니다. 마지막으로 정렬된 행을 테이블에 다시 추가하여 정렬을 완료합니다.

3. 전체 샘플 코드

다음은 전체 샘플 코드입니다.🎜rrreee🎜4. 결론🎜🎜위의 코드 예제를 통해 JavaScript를 사용하여 테이블 정렬 기능을 구현하는 방법을 배웠습니다. 테이블 헤더에 클릭 이벤트를 추가하고 이벤트 핸들러에서 정렬 기능을 호출하면 컬럼별 정렬 기능을 구현할 수 있습니다. 이러한 방식으로 사용자는 테이블을 쉽게 정렬하여 대상 데이터를 더 빠르게 찾을 수 있습니다. 이 글이 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다! 🎜

위 내용은 JavaScript를 사용하여 테이블 정렬 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿