使用 jQuery 动态渲染表格与状态切换

在前端开发中，将后端返回的数据（或本地模拟数据）动态渲染到页面上，并实现交互逻辑，是最基础也是最重要的技能之一。本文将以一个"用户列表"为例，手把手教大家如何使用 jQuery 实现表格的动态渲染、数据格式化以及状态的实时切换。

一、 需求分析

在开始写代码之前，我们先明确要实现的功能：

1. 数据渲染 ：将包含 id、name、role、status 的用户数组渲染为 HTML 表格。
2. 数据格式化 ：
   • role 字段（1, 2, 3）需要转换为对应的角色名称（admin, editor, viewer）。
   • status 字段（1, 0）需要转换为带颜色的状态标签（启用/禁用）。
3. 交互功能 ：点击"切换状态"按钮，修改对应数据的 status，并实时刷新表格。

二、 核心代码拆解

1. HTML 结构准备

我们只需要一个基础的表格骨架，表头写死，表体 <tbody> 留空，交给 JS 来填充。

<table id="list">
    <thead>
        <tr>
            <th>id</th>
            <th>名称</th>
            <th>描述(角色)</th>
            <th>是否启用</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="list-body"></tbody>
</table>

2. 数据与格式化逻辑

使用 switch 语句处理角色映射，使用三元运算符处理状态样式。

const userList = [
    { id: 1, name: "张三", role: 1, status: 1 },
    { id: 2, name: "李四", role: 2, status: 1 },
    // ... 更多数据
];

// 格式化角色
function getRoleName(role) {
    switch (role) {
        case 1: return 'admin';
        case 2: return 'editor';
        case 3: return 'viewer';
        default: return '未知';
    }
}

3. 动态渲染函数

通过字符串拼接（模板字符串）生成 HTML，并插入到 DOM 中。

function renderList(data) {
    let html = '';
    data.forEach(item => {
        // 根据状态决定样式和文字
        const statusHtml = item.status === 1 
            ? '<span style="background:chartreuse;padding:2px 8px;border-radius:4px;">启用</span>'
            : '<span style="background:#ccc;padding:2px 8px;border-radius:4px;">禁用</span>';

        html += `
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${getRoleName(item.role)}</td>
                <td>${statusHtml}</td>
                <td><button class="toggle-btn" data-id="${item.id}">切换状态</button></td>
            </tr>
        `;
    });
    $('#list-body').html(html);
}

// 初始化渲染
renderList(userList);

4. 事件委托处理交互

重点 ：由于按钮是动态生成的，直接绑定 click 事件会失效。必须使用事件委托 ，将事件绑定在父级（如 document 或 tbody）上。

$(document).on('click', '.toggle-btn', function() {
    const id = $(this).data('id');
    // 找到对应的数据项
    const user = userList.find(u => u.id === id);
    
    if (user) {
        // 切换状态：1变0，0变1
        user.status = user.status === 1 ? 0 : 1;
        // 重新渲染
        renderList(userList);
    }
});

三、 代码优化建议

虽然上面的代码能跑，但在实际工程中，我们还可以做得更好：

1. 避免全量重绘 ：当前每次点击都调用 renderList 重新生成整个表格。如果数据量大，性能会差。优化方案是直接操作 DOM，只修改当前行的状态文字和按钮状态，或者只更新 userList 后局部刷新。
2. 样式分离 ：代码中使用了大量内联样式（style="..."）。建议提取为 CSS 类，例如 .status-active 和 .status-inactive，方便后期维护。
3. 语义化标签 ：表头建议使用 <th> 而不是 <td>，这有助于 SEO 和无障碍访问。
4. XSS 防护 ：如果 name 等字段来自用户输入，直接拼接 HTML 会有跨站脚本攻击风险。生产环境建议使用 $.text() 或模板引擎（如 Handlebars）来自动转义。

四、 总结

通过这个小案例，我们复习了以下前端核心知识点：

• 模板字符串：让 HTML 拼接更优雅。
• 事件委托：解决动态元素绑定事件的问题。
• 数据驱动视图：修改数据源 -> 重新渲染，这是现代前端框架（Vue/React）的核心思想雏形。