我想在单击按钮时对参数进行排序：id，薪水和年龄。假设我必须动态清理我的表（deleteRow），进行排序，然后再次显示数据。但是，似乎很难。有人可以帮我吗？有没有更好的办法？
JavaScript：
const butt = document.getElementById('button');
const swTable = document.getElementById('table').getElementsByTagName('tbody')[0];
const url = 'http://dummy.restapiexample.com/api/v1/employees';
function fetchFromUrl(url) {
return fetch(url).then(function(resp) {
return resp.json()
});
}
function createElement(nameOfTag, text) {
const element = document.createElement(nameOfTag);
const content = document.createTextNode(text);
element.appendChild(content);
return element;
}
function createTable(data) {
const table = document.createElement('tr');
const {
id,
employee_name,
employee_salary,
employee_age
} = data;
table.appendChild(createElement('td', id))
table.appendChild(createElement('td', employee_name))
table.appendChild(createElement('td', employee_salary))
table.appendChild(createElement('td', employee_age))
return table;
}
fetchFromUrl('http://dummy.restapiexample.com/api/v1/employees')
.then(data => {
data.forEach(result => {
const row = createTable(result);
swTable.appendChild(row);
})
});<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<body>
<table id=table>
<thead>
<th><button id=id> id </button> </th>
<th><button id=name> employee name </button> </th>
<th><button id=salary> employee salary </button> </th>
<th><button id=age> employee age </button> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="module" src='main.js' type="text/javascript">
</script>
</body>
</html>使用纯JavaScript，您可以使用函数对data数组进行排序，然后用tbody新函数替换旧函数。
例如：
function sortByField(field) {
if (field == 'id') {
data.sort((a,b) => (Number(a.id) > Number(b.id)) ? 1 : ((Number(b.id) > Number(a.id)) ? -1 : 0));
} else if (field == 'name') {
data.sort((a,b) => (a.employee_name > b.employee_name) ? 1 : ((b.employee_name > a.employee_name) ? -1 : 0));
} else if (field == 'salary') {
data.sort((a,b) => (Number(a.employee_salary) > Number(b.employee_salary)) ? 1 : ((Number(b.employee_salary) > Number(a.employee_salary)) ? -1 : 0));
} else if (field == 'age') {
data.sort((a,b) => (Number(a.employee_age) > Number(b.employee_age)) ? 1 : ((Number(b.employee_age) > Number(a.employee_age)) ? -1 : 0));
}
var old_tbody = document.getElementById('tbody');
var new_tbody = document.createElement('tbody');
new_tbody.setAttribute('id', 'tbody');
data.forEach(result => {
const row = createTable(result);
new_tbody.appendChild(row);
});
old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
}
并onclick在按钮上添加事件处理程序：
onclick="sortByField('id')"
在这里您可以找到一个有效的例子。
请注意，我曾经Number在排序时将字符串转换为数字。
当然，您可以使用Underscore库执行排序，使用JQuery库选择html元素等。
并在这里查看对对象数组进行排序的不同方式。