웹사이트에 데이터를 표시할 때 사용자가 데이터를 더 쉽게 탐색할 수 있는 기능을 제공하는 것이 중요합니다. 그러한 기능 중 하나는 데이터를 정렬하는 기능입니다.
데이터 정렬이란 지정된 값에 따라 데이터를 오름차순 또는 내림차순으로 정렬하는 것을 의미합니다. JavaScript를 사용하여 웹사이트의 클라이언트 측에서 데이터 정렬을 수동으로 처리할 수 있습니다. 이는 정적 웹 사이트를 개발하거나 서버에서 데이터 정렬 부담을 제거하는 경우 특히 유용합니다.
이 튜토리얼에서는 JavaScript를 사용하여 시뮬레이션된 JSON 응답의 데이터를 HTML 테이블에 표시합니다. 또한 테이블 헤더의 값을 기준으로 테이블을 정렬 가능하게 만드는 기능도 포함됩니다.
완제품입니다. 테이블 헤더를 클릭하면 그에 따라 테이블이 정렬됩니다.
<table> 标签是用于在网页上显示数据的语义 HTML 标签。我们将把 <table> 태그는 테이블 컨테이너 div 내부에 배치되므로 CSS에 일부 반응형 스타일을 포함할 수 있습니다.
테이블에는 헤더와 thead 和表内容、tbody 标签。在表头中，我们将在每个 th 정렬 기능을 처리하는 버튼이 포함된 셀이 포함됩니다. 테이블 콘텐츠의 셀은 JSON 응답의 데이터를 사용하여 JavaScript를 통해 추가됩니다.
HTML 테이블을 사용할 때 가장 흔히 발생하는 문제 중 하나는 응답성이 부족하다는 것입니다. 표에 셀이 겹치거나 전체 페이지의 경계를 초과할 수 있습니다.
오버플로 스크롤 속성이 있는 전체 페이지 너비 테이블 컨테이너에 테이블을 배치하면 이러한 문제를 해결할 수 있습니다. 이렇게 하면 테이블의 너비는 항상 전체 페이지만큼만 되며 스크롤 가능한 오버플로로 인해 셀을 축소할 필요가 없습니다. 또한 텍스트 줄 바꿈을 방지하기 위해 테이블 셀에 최소 너비 속성을 포함합니다.
이것은 테이블을 스크롤 가능하게 만드는 데 필요한 CSS입니다:
으아아아그런 다음 나머지 스타일을 추가할 수 있습니다.
으아아아이 예에서는 모의 구문 분석된 JSON 응답을 사용합니다. 이것은 우리의 데이터입니다:
으아아아JavaScript에서 요소를 타겟팅할 수 있도록 <tbody id="table-content"> 태그에 데이터를 넣습니다.
으아아아
의 각 개체를 기반으로 합니다. 객체 데이터를 기반으로 새 행을 생성하는 함수를 정의해 보겠습니다. response.pokedata
으아아아
메소드를 사용하여 배열 형식으로 객체 키를 가져옵니다. 반환 값은 다음과 같습니다: Object.keys()
메서드를 사용하여 각 키를 반복합니다. map 메소드는 배열의 각 항목에 대해 전달된 함수를 실행합니다. .map()
메서드를 사용하여 생성된 셀을 함수 시작 부분에 정의된 행에 추가합니다. .appendChild()
배열을 반복하고 각 새 행을 tableContent 요소에 추가하는 함수를 정의하겠습니다. response.pokedata 数组并将每个新行附加到我们的 tableContent
으아아아
함수를 이벤트 리스너에 전달합니다. getTableContent
으아아아
으아아아
클릭한 버튼을 기준으로 데이터를 정렬하고, 버튼을 클릭할 때 정렬 방향(오름차순 또는 내림차순)을 전환하는 기능도 포함하려고 합니다.
.sort() 메서드를 사용하여 배열의 데이터 정렬을 처리할 수 있습니다. sort 메소드는 두 개의 서로 다른 매개변수를 비교하고 함수 응답에 따라 정렬하는 함수를 허용합니다. .sort() 方法来处理 response.pokedata
compareFunction(a, b) 返回值
a 之后 b
a 排序在 b 之前a 和 b 的原始顺序
来源：MDN
关于排序方法需要注意的另一件事是它会改变它所操作的原始数组。这意味着它改变了我们原始数组的值。
我们可以通过使用扩展语法来避免改变原始数组[...]
现在我们可以创建排序函数了。这就是我们的排序函数的逻辑：
getTableContent 函数将排序后的数据附加到我们的 tableContentconst 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
