javascript - JS 排序表 - 排序指标
问题描述
我已经用排序功能构建了这个表,现在我也在尝试为选定的对象设置一个类,th
这样我就可以用 CSS 放置一些箭头作为排序指示符。
我需要一种方法将动态 .asc 和 .desc 类设置为我在 ..th
上某处使用 JS选择的类sortTable()
。它还需要是纯 JS。
var myData, asc = {'userId':true, 'id':true, 'title':true, 'completed':true};
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'https://jsonplaceholder.typicode.com/todos');
myRequest.onload = function () {
myData = JSON.parse(myRequest.responseText);
dataTable(myData);
};
myRequest.send();
function dataTable(data) {
if (data.length > 0) {
var temp = '';
data.forEach((u) => {
temp += '<tr>';
temp += "<td style='text-align: center'>" + u.userId + '</td>';
temp += "<td style='text-align: center'>" + u.id + '</td>';
temp += '<td>' + u.title + '</td>';
temp += "<td style='text-align: center'>" + u.completed + '</td>';
temp += "<td>" + '<input type="button" value="Delete" onclick="deleteRow(this)"> <input type="button" value="Edit" onclick="insertToForm(this)">' + '</td></tr>';
document.getElementById('data').innerHTML = temp;
});
}
}
function sortTable(col){
myData.sort(function(a, b) {
if(asc[col]){
return a[col] > b[col]? 1:-1;
}
else{
return a[col] > b[col]? -1:1;;
}
});
asc[col] = !asc[col];
document.getElementById('data').innerHTML = '';
dataTable(myData);
}
.container{
display: flex;
margin: 25px 10px;
}
.my-table {
border-collapse: collapse;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
margin-right: 15px;
}
.my-table td, th {
padding: 12px 15px;
}
.my-table thead {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.my-table th {
background-color: #009879;
color: #ffffff;
text-align: left;
cursor: pointer;
}
.my-table tbody tr {
border-bottom: 1px solid #dddddd;
}
tbody tr input {
width: 50px;
}
.my-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.my-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
<table id="table" class="my-table">
<thead>
<tr>
<th id="tbl-head-userid" onclick="sortTable('userId');">UserID</th>
<th id="tbl-head-id" onclick="sortTable('id');">ID</th>
<th id="tbl-head-title" onclick="sortTable('title');">Title</th>
<th id="tbl-head-completed" onclick="sortTable('completed');">Completion</th>
<th>Action</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
解决方案
我已经编辑了剪辑。单击时将显示箭头按钮<th>
,并且其他标题上的图标将被删除
var myData, asc = {'userId':true, 'id':true, 'title':true, 'completed':true};
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'https://jsonplaceholder.typicode.com/todos');
myRequest.onload = function () {
myData = JSON.parse(myRequest.responseText);
dataTable(myData);
};
myRequest.send();
function dataTable(data) {
if (data.length > 0) {
var temp = '';
data.forEach((u) => {
temp += '<tr>';
temp += "<td style='text-align: center'>" + u.userId + '</td>';
temp += "<td style='text-align: center'>" + u.id + '</td>';
temp += '<td>' + u.title + '</td>';
temp += "<td style='text-align: center'>" + u.completed + '</td>';
temp += "<td>" + '<input type="button" value="Delete" onclick="deleteRow(this)"> <input type="button" value="Edit" onclick="insertToForm(this)">' + '</td></tr>';
document.getElementById('data').innerHTML = temp;
});
}
}
function sortTable(col, e){
myData.sort(function(a, b) {
if(asc[col]){
return a[col] > b[col]? 1:-1;
}
else{
return a[col] > b[col]? -1:1;;
}
});
asc[col] = !asc[col];
document.getElementById('data').innerHTML = '';
dataTable(myData);
var currentTarget = e.currentTarget;
Array.from(currentTarget.parentElement.children).forEach(function(ele) {
ele.classList.remove('asc', 'des');
})
if(!asc[col]) {
currentTarget.classList.add('asc');
} else {
currentTarget.classList.add('des');
}
}
.container{
display: flex;
margin: 25px 10px;
}
.my-table {
border-collapse: collapse;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
margin-right: 15px;
}
.my-table td, th {
padding: 12px 15px;
}
.my-table thead {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.my-table th {
background-color: #009879;
color: #ffffff;
text-align: left;
cursor: pointer;
}
.my-table tbody tr {
border-bottom: 1px solid #dddddd;
}
tbody tr input {
width: 50px;
}
.my-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.my-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
th {
position: relative;
}
th.asc:before,
th.des:after {
border: 4px solid transparent;
content: "";
display: block;
height: 0;
right: 5px;
top: 50%;
position: absolute;
width: 0;
}
th.asc:before {
border-bottom-color: #fff;
margin-top: -5px;
}
th.des:after {
border-top-color: #ffff;
}
<table id="table" class="my-table">
<thead>
<tr>
<th id="tbl-head-userid" onclick="sortTable('userId', event);">UserID</th>
<th id="tbl-head-id" onclick="sortTable('id', event);">ID</th>
<th id="tbl-head-title" onclick="sortTable('title', event);">Title</th>
<th id="tbl-head-completed" onclick="sortTable('completed', event);">Completion</th>
<th>Action</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
推荐阅读
- javascript - 如果菜单链接有子项,如何防止菜单链接在第一次点击时重定向
- html - 如何避免在 HTML 中跨页面拆分 DIV
- xcode - 如何在每个新版本中重置自动递增的内部版本号?
- arrays - C Array:如何移动字符串中的每个字符?
- node.js - 使用 Node.js 和 Electron.js 将 HTML 转为 PDF
- python - 如何为对象中的所有方法起别名?
- javascript - Vuetify 自动完成组件:设置值
- protractor - 预期 '' 等于 '您所做的更改可能不会被保存。
- javascript - 如何使用 javascript 打印棋盘看起来像下面的网格
- r - 当 left_join() 在 R 中标记时间戳数据帧时出现不希望的输出