求助：实现数组生成表格的按姓名、ID、年龄按钮排序功能

核心问题分析 #

原代码的问题在于：

• 直接遍历对象生成表格，对象的键顺序无法稳定控制，且未将数据转换为可排序的数组结构
• 点击事件绑定在循环内部，重复绑定且未实现排序逻辑，仅清空单元格内容
• 缺少“排序后重新渲染表格”的核心机制，导致控制台能排序但页面无更新

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title>Document</title>
</head>
<body>
    <div class="divide"></div>
    <div class="sort-buttons">
        <button data-sort="name">按姓名排序</button>
        <button data-sort="age">按年龄排序</button>
        <button data-sort="id">按ID排序</button>
        <button id="toggle-order">切换升序/降序</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

.tabl {
    border: 3px solid rgb(126, 126, 126);
    margin-left: 100px;
    margin-top: 50px;
    border-collapse: collapse; /* 合并边框，优化表格样式 */
}
.tabl th, .tabl td {
    border: 2px solid rgb(126, 126, 126);
    padding: 8px 12px;
}
.tabl tr {
    border: 2px solid rgb(0, 0, 0);
}
.sort-buttons {
    margin-left: 100px;
    margin-top: 20px;
}
.sort-buttons button {
    margin-right: 10px;
    padding: 6px 12px;
}

JavaScript

// 原始数据
const massiv = {
  'Andrey': [['Возраст: ', 19], ['IDentificator: ', '#333']],
  'Random': [['Возраст: ', 1489], ['IDentificator: ', '#111']],
  'FcScript': [['Возраст: ', 189], ['IDentificator: ', '#445']],
  'Ampere': [['Возраст: ', 159], ['IDentificator: ', '#654']],
  'Gerc': [['Возраст: ', 5519], ['IDentificator: ', '#0-9-97']],
  'NotAndrey': [['Возраст: ', 23419], ['IDentificator: ', '#-63i4k']],
};

// 将对象转换为可排序的数组结构
let users = Object.entries(massiv).map(([name, info]) => ({
  name,
  age: info.find(item => item[0] === 'Возраст: ')[1],
  id: info.find(item => item[0] === 'IDentificator: ')[1]
}));

// 默认排序顺序：升序
let isAscending = true;

// 获取表格容器
const tableContainer = document.querySelector('.divide');

// 渲染表格的函数
function renderTable(sortedUsers) {
  // 清空原有表格
  tableContainer.innerHTML = `<table class='tabl'></table>`;
  const table = document.querySelector('.tabl');

  // 遍历排序后的用户数组生成表格行
  sortedUsers.forEach(user => {
    // 姓名行
    const nameRow = document.createElement('tr');
    nameRow.innerHTML = `<td colspan='2'>${user.name}</td>`;
    table.appendChild(nameRow);

    // 年龄行
    const ageRow = document.createElement('tr');
    ageRow.innerHTML = `<td>Возраст: </td><td>${user.age}</td>`;
    table.appendChild(ageRow);

    // ID行
    const idRow = document.createElement('tr');
    idRow.innerHTML = `<td>IDentificator: </td><td>${user.id}</td>`;
    table.appendChild(idRow);
  });
}

// 排序函数
function sortUsers(sortKey) {
  users.sort((a, b) => {
    let comparison = 0;
    if (sortKey === 'age') {
      // 年龄是数字，直接比较数值
      comparison = a[sortKey] - b[sortKey];
    } else {
      // 姓名和ID是字符串，按Unicode码点比较
      comparison = a[sortKey].localeCompare(b[sortKey]);
    }
    // 根据顺序反转结果
    return isAscending ? comparison : -comparison;
  });
  // 重新渲染表格
  renderTable(users);
}

// 初始化渲染表格
renderTable(users);

// 绑定排序按钮事件
document.querySelectorAll('[data-sort]').forEach(btn => {
  btn.addEventListener('click', () => {
    const sortKey = btn.dataset.sort;
    sortUsers(sortKey);
  });
});

// 绑定顺序切换按钮事件
document.getElementById('toggle-order').addEventListener('click', () => {
  isAscending = !isAscending;
  // 切换后按姓名重新排序（可优化为记录最后排序键）
  sortUsers('name');
});

关键改进点 #

1. 数据结构转换：把原对象转换成包含name、age、id的数组，解决对象无法直接排序的问题
2. 分离渲染逻辑：编写独立的renderTable函数，排序后调用该函数即可更新页面表格
3. 正确的排序逻辑：针对数字（年龄）和字符串（姓名、ID）使用对应比较方式，支持升序/降序切换
4. 优化事件绑定：批量绑定按钮事件，避免循环内重复绑定的问题
5. 修复CSS样式：添加border-collapse: collapse规范表格边框，修正选择器语法错误

内容的提问来源于stack exchange，提问作者GLobeasd