정렬 기능을 갖춘 JavaScript 지원 HTML 테이블 생성

웹사이트에 데이터를 표시할 때 사용자가 데이터를 더 쉽게 탐색할 수 있는 기능을 제공하는 것이 중요합니다. 그러한 기능 중 하나는 데이터를 정렬하는 기능입니다.

데이터 정렬이란 지정된 값에 따라 데이터를 오름차순 또는 내림차순으로 정렬하는 것을 의미합니다. JavaScript를 사용하여 웹사이트의 클라이언트 측에서 데이터 정렬을 수동으로 처리할 수 있습니다. 이는 정적 웹 사이트를 개발하거나 서버에서 데이터 정렬 부담을 제거하는 경우 특히 유용합니다.

이 튜토리얼에서는 JavaScript를 사용하여 시뮬레이션된 JSON 응답의 데이터를 HTML 테이블에 표시합니다. 또한 테이블 헤더의 값을 기준으로 테이블을 정렬 가능하게 만드는 기능도 포함됩니다.

완제품입니다. 테이블 헤더를 클릭하면 그에 따라 테이블이 정렬됩니다.

1. HTML을 사용하여 콘텐츠 배치

<table> 标签是用于在网页上显示数据的语义 HTML 标签。我们将把 <table> 태그는 테이블 컨테이너 div 내부에 배치되므로 CSS에 일부 반응형 스타일을 포함할 수 있습니다.

으아아아

테이블에는 헤더와 thead 和表内容、tbody 标签。在表头中，我们将在每个 th 정렬 기능을 처리하는 버튼이 포함된 셀이 포함됩니다. 테이블 콘텐츠의 셀은 JSON 응답의 데이터를 사용하여 JavaScript를 통해 추가됩니다.

으아아아

2.CSS로 반응형 테이블 만들기

HTML 테이블을 사용할 때 가장 흔히 발생하는 문제 중 하나는 응답성이 부족하다는 것입니다. 표에 셀이 겹치거나 전체 페이지의 경계를 초과할 수 있습니다.

오버플로 스크롤 속성이 있는 전체 페이지 너비 테이블 컨테이너에 테이블을 배치하면 이러한 문제를 해결할 수 있습니다. 이렇게 하면 테이블의 너비는 항상 전체 페이지만큼만 되며 스크롤 가능한 오버플로로 인해 셀을 축소할 필요가 없습니다. 또한 텍스트 줄 바꿈을 방지하기 위해 테이블 ​​셀에 최소 너비 속성을 포함합니다.

이것은 테이블을 스크롤 가능하게 만드는 데 필요한 CSS입니다:

으아아아

그런 다음 나머지 스타일을 추가할 수 있습니다.

으아아아

3. JSON 데이터를 HTML 테이블에 넣기

이 예에서는 모의 구문 분석된 JSON 응답을 사용합니다. 이것은 우리의 데이터입니다:

으아아아

JavaScript에서 요소를 타겟팅할 수 있도록 <tbody id="table-content"> 태그에 데이터를 넣습니다. 으아아아

행 내용은

의 각 개체를 기반으로 합니다. 객체 데이터를 기반으로 새 행을 생성하는 함수를 정의해 보겠습니다. response.pokedata 으아아아

이 함수에서는

메소드를 사용하여 배열 형식으로 객체 키를 가져옵니다. 반환 값은 다음과 같습니다: Object.keys()

객체 키 배열이 있으면

메서드를 사용하여 각 키를 반복합니다. map 메소드는 배열의 각 항목에 대해 전달된 함수를 실행합니다. .map()

이 매핑 함수에서는 배열의 각 항목에 대해 새 셀을 만들고 셀의 innerHTML을 해당 개체 키 값으로 설정합니다.

마지막으로

메서드를 사용하여 생성된 셀을 함수 시작 부분에 정의된 행에 추가합니다. .appendChild()

이제 행 생성 함수가 있으므로

배열을 반복하고 각 새 행을 tableContent 요소에 추가하는 함수를 정의하겠습니다. response.pokedata 数组并将每个新行附加到我们的 tableContent 으아아아

페이지가 로드된 후 테이블에 콘텐츠를 추가하기 위해

함수를 이벤트 리스너에 전달합니다. getTableContent 으아아아

4. JavaScript를 사용하여 데이터 정렬

이제 테이블을 만들었으니 정렬 기능을 추가해 보겠습니다. HTML의 헤더 셀에는 객체 키를 ID로 갖는 버튼이 있습니다. 이제 다음 버튼을 찾아보겠습니다:

으아아아

클릭한 버튼을 기준으로 데이터를 정렬하고, 버튼을 클릭할 때 정렬 방향(오름차순 또는 내림차순)을 전환하는 기능도 포함하려고 합니다.

.sort() 메서드를 사용하여

배열의 데이터 정렬을 처리할 수 있습니다. sort 메소드는 두 개의 서로 다른 매개변수를 비교하고 함수 응답에 따라 정렬하는 함수를 허용합니다. .sort() 方法来处理 response.pokedata

<table> compareFunction(a, b) 返回值 排序顺序 > 0 排序 a 之后 b < 0 将 a 排序在 b 之前 === 0 保持 a 和 b 的原始顺序

来源：MDN

关于排序方法需要注意的另一件事是它会改变它所操作的原始数组。这意味着它改变了我们原始数组的值。

我们可以通过使用扩展语法来避免改变原始数组[...]

现在我们可以创建排序函数了。这就是我们的排序函数的逻辑：

1. 清除tableContent元素中的内容
2. 根据所选参数和方向对数据进行排序
3. 使用 getTableContent 函数将排序后的数据附加到我们的 tableContent

const sortData = (data, param, direction = "asc") => {
  tableContent.innerHTML = '';
  const sortedData =
    direction == "asc"
      ? [...data].sort(function (a, b) {
          if (a[param] < b[param]) {
            return -1;
          }
          if (a[param] > b[param]) {
            return 1;
          }
          return 0;
        })
      : [...data].sort(function (a, b) {
          if (b[param] < a[param]) {
            return -1;
          }
          if (b[param] > a[param]) {
            return 1;
          }
          return 0;
        });

  getTableContent(sortedData);
};

我们的排序函数需要三个参数：

• data：待排序的数组
• param：用于对数组进行排序的值
• direction：按升序或降序对数组进行排序。默认参数值设置为“asc”。

我们通过将innerHTML 设置为空白字符串来清除tableContent 元素中的内容。然后，我们使用 .sort() 方法和 direction 参数来确定数据应如何排序。我们反转比较函数以便按降序排序。通过这种方式使用比较函数，我们可以对数据进行排序，而不管值的类型（字符串、整数、浮点数等）

最后，我们将 sortedData 作为表内容中的新值传递。

现在，我们将排序函数传递到表格按钮的单击事件侦听器中，并处理切换排序方向。

window.addEventListener("load", () => {
  getTableContent(response.pokedata);

  [...tableButtons].map((button) => {
    button.addEventListener("click", (e) => {
        
      if (e.target.getAttribute("data-dir") == "desc") {
        sortData(response.pokedata, e.target.id, "desc");
        e.target.setAttribute("data-dir", "asc");
      } else {
        sortData(response.pokedata, e.target.id, "asc");
        e.target.setAttribute("data-dir", "desc");
      }
      
    });
  });
});

在此函数中，我们通过在按钮上设置 data-dir 属性来处理切换以确定排序方向。我们还将更新 CSS 以根据排序方向在按钮旁边显示一个图标：

th button::after {
  position: absolute;
  right: 0.5rem;
}

th button[data-dir="asc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='0, 0 8,0 4,8 8' fill='%23818688'/%3E%3C/svg%3E");
}

th button[data-dir="desc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='4 0,8 8,0 8' fill='%23818688'/%3E%3C/svg%3E");
}

我们不想让图标显示在所有以前单击的按钮上，因此我们将定义一个 resetButtons 函数，该函数删除任何未单击的按钮上的 data-dir 属性。

const resetButtons = (event) => {
  [...tableButtons].map((button) => {
    if (button !== event.target) {
      button.removeAttribute("data-dir");
    }
  });
};

我们会将该函数传递到按钮事件侦听器中，以便在单击新按钮时重置以前的按钮

window.addEventListener("load", () => {
  getTableContent(response.pokedata);

  [...tableButtons].map((button) => {
    button.addEventListener("click", (e) => {
        
      resetButtons(e);
      
      if (e.target.getAttribute("data-dir") == "desc") {
        sortData(response.pokedata, e.target.id, "desc");
        e.target.setAttribute("data-dir", "asc");
      } else {
        sortData(response.pokedata, e.target.id, "asc");
        e.target.setAttribute("data-dir", "desc");
      }
      
    });
  });
});

结论

这样，我们就完成了！我们仅使用普通 JavaScript 创建了一个可排序的表格！

위 내용은 정렬 기능을 갖춘 JavaScript 지원 HTML 테이블 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!