数据排序是指将数据按照指定的值，按升序或降序排列。在本教程中，我们将使用JavaScript将来自模拟JSON响应的数据显示到HTML表中。表格内容的单元格将使用来自我们JSON响应的数据通过JavaScript添加。表格可能存在单元格重叠问题或超出整页边界。map方法在数组中的每个项目上执行我们传递给它的函数。在这个map函数中，我们为数组中的每个项目创建一个新单元格，并将单元格innerHTML设置为相应的对象键值。
javascript怎么创建html?在网站上显示数据时，提供使用户更容易浏览数据的功能非常重要其中一项功能是对数据进行排序的能力，接下来我们就来聊聊关于javascript怎么创建html?以下内容大家不妨参考一二希望能帮到您!
javascript怎么创建html
在网站上显示数据时，提供使用户更容易浏览数据的功能非常重要。其中一项功能是对数据进行排序的能力。
数据排序是指将数据按照指定的值，按升序或降序排列。我们可以使用 JavaScript 在网站的客户端手动处理数据排序。如果您在静态网站上工作或从服务器中删除排序数据的冲击，这将特别有用。
在本教程中，我们将使用 JavaScript 将来自模拟 JSON 响应的数据显示到 HTML 表中。我们还将包括根据表头中的值使表可排序的功能。
下面来看看成品。单击任何表格标题以对表格进行相应的排序。
1.用 HTML 放置内容<table>标签是用于在网页上显示数据的语义 HTML 标签。我们将把我们的<table>标签放在一个表格容器 div 中，这将允许我们在 CSS 中包含一些响应式样式。
<div >
<table >
</table>
</div>
我们的表格将包含表格标题、thead表格内容、tbody标签。在我们的表格标题中，我们将在每个th单元格中包含用于处理排序功能的按钮。表格内容的单元格将使用来自我们 JSON 响应的数据通过 JavaScript 添加。
<div >
<table >
<thead>
<tr>
<th><button >Name</button></th>
<th><button >Type</button></th>
<th><button >HP</button></th>
<th><button >Attack</button></th>
<th><button >Defense</button></th>
<th><button >Sp. Attack</button></th>
<th><button >Sp. Defense</button></th>
<th><button >Speed</button></th>
<th><button >Total</button></th>
</tr>
</thead>
<tbody ></tbody>
</table>
</div>
2.使用 CSS 制作响应式表格使用 HTML 表格时更常见的问题之一是缺乏响应能力。表格可能存在单元格重叠问题或超出整页边界。
我们可以通过将表格放置在一个表格容器中来解决这些问题，该表格容器是具有溢出滚动属性的整个页面的宽度。这样，表格总是只有整页宽，并且由于可滚动溢出，无需缩小单元格。我们还将在表格单元格中包含 min-width 属性以避免文本换行。
表格溢出视口而不被压扁
这是使我们的表格可滚动所需的 CSS：
.table-container {
width: 100%;
overflow: scroll;
}
table {
width: 100%;
}
然后我们可以添加其余的样式：
.table-container {
margin: auto;
max-width: 1200px;
min-height: 100vh;
overflow: scroll;
width: 100%;
}
table {
border-collapse: collapse;
width: 100%;
}
thead tr {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
height: 1px;
}
th {
font-weight: bold;
height: inherit;
padding: 0;
}
th:not(:first-of-type) {
border-left: 1px solid #ddd;
}
th button {
background-color: #eee;
border: none;
cursor: pointer;
display: block;
font: inherit;
height: 100%;
margin: 0;
min-width: max-content;
padding: 0.5rem 1rem;
position: relative;
text-align: left;
width: 100%;
}
tbody tr {
border-bottom: 1px solid #ddd;
}
td {
padding: 0.5rem 1rem;
text-align: left;
}
3.将 JSON 数据放入 HTML 表中对于此示例，我们将使用模拟解析的 JSON 响应。这是我们的数据的样子：
const response = {
"pokedata": [
{
"name": "Bulbasaur",
"type": "Grass",
"hp": 45,
"attack": 49,
"defense": 49,
"spAttack": 65,
"spDefense": 65,
"speed": 45,
"total": 318
},
...
]
}
我们将把数据放在我们的<tbody >标签中，以便我们在 JavaScript 中定位该元素；
const tableContent = document.getElementById("table-content")
行内容将基于我们的response.pokedata. 让我们定义一个基于对象数据创建新行的函数：
const createRow = (obj) => {
const row = document.createElement("tr");
const objKeys = Object.keys(obj);
objKeys.map((key) => {
const cell = document.createElement("td");
cell.setAttribute("data-attr", key);
cell.innerHTML = obj[key];
row.appendChild(cell);
});
return row;
};
在这个函数中，我们使用Object.keys()方法来获取对象键作为一个数组。这是返回值的样子：
Object.keys() 返回一个包含对象键的数组
一旦我们获得了对象键的数组，我们就使用该.map()方法遍历每个键。map 方法在数组中的每个项目上执行我们传递给它的函数。
在这个 map 函数中，我们为数组中的每个项目创建一个新单元格，并将单元格 innerHTML 设置为相应的对象键值。
使用键数组映射对象
最后，我们使用该方法将我们创建的单元格附加到函数开头定义的行中.appendChild()。
现在我们有了行创建函数，我们将定义一个函数来循环遍历response.pokedata数组并将每个新行附加到我们的tableContent元素。
const getTableContent = (data) => {
data.map((obj) => {
const row = createRow(obj);
tableContent.appendChild(row);
});
};
我们将把我们的getTableContent函数传递给一个事件监听器，以便在页面加载后将内容添加到表中。
window.addEventListener("load", () => {
getTableContent(response.pokedata);
});
4.使用 JavaScript 对数据进行排序现在我们已经创建了表格，让我们添加排序功能。在我们的 HTML 中，我们在标题单元格中包含按钮，这些按钮将对象键作为其 id。现在让我们定位这些按钮：
const tableButtons = document.querySelectorAll("th button");
我们希望根据单击的按钮对数据进行排序，并且还包括一个在单击按钮时切换排序方向（升序或降序）的功能。
我们可以使用该.sort()方法对response.pokedata数组中的数据进行排序。sort 方法接受一个比较两个不同参数的函数，并根据函数响应对它们进行排序：
> 0排序 a 后 b
< 0a先排序b
=== 0a保持和的原始顺序b
compareFunction(a, b) 返回值排序
来源：MDN
关于 sort 方法需要注意的另一件事是它会改变它所操作的原始数组。这意味着它改变了我们原始数组的值。
使用 .sort() 时的数组突变
我们可以通过使用扩展语法来避免改变我们的原始数组[...]
使用扩展语法避免数组变异
现在我们可以创建排序函数了。这就是我们排序函数的逻辑：
- 清除 tableContent 元素中的内容
- 根据选择的参数和方向对数据进行排序
- 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);
};
我们的排序函数接受三个参数：
我们通过将 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,");
}
th button[data-dir="desc"]::after {
content: url("data:image/svg xml,");
}
我们不希望图标显示在所有先前单击的按钮上，因此我们将定义一个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 创建了一个可排序的表！
