异常教程

jquery table（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在前端开发中，表格（Table）是展示结构化数据的常见元素，而 jQuery 凭借其简洁的语法和强大的 DOM 操作能力，成为快速实现表格交互效果的利器。无论是动态加载数据、筛选排序，还是响应式设计，jQuery table 的组合都能让开发者高效完成任务。本文将从基础到进阶，通过实际案例逐步讲解如何用 jQuery 操控表格，帮助编程初学者和中级开发者掌握这一实用技能。

一、jQuery Table 的基础操作

1.1 选择表格元素

表格的 HTML 结构通常包含 <table>、<tr>（行）、<td>（数据单元格）和 <th>（表头）标签。使用 jQuery 可以轻松定位这些元素。例如，通过以下代码选择所有表格的表头行：

// 选择第一个表格的所有表头行
$("table:eq(0) thead tr");

比喻：可以将表格比作仓库，<table> 是仓库的大门，<tr> 是货架，而 <td> 或 <th> 则是货架上的物品。jQuery 的选择器就像仓库管理员，能精准定位到任意一个“货架”或“物品”。

1.2 遍历表格行与单元格

遍历表格行是常见需求，例如计算总和或高亮特定行。以下代码演示如何遍历表格的每一行，并获取单元格的文本内容：

// 遍历第一个表格的所有数据行（tbody 中的 tr）
$("table:eq(0) tbody tr").each(function(index, row) {
    // 获取当前行的第1列内容（索引从0开始）
    const firstCellContent = $(row).find("td:eq(0)").text();
    console.log(`第 ${index + 1} 行，第一列内容：${firstCellContent}`);
});

注意：使用 .each() 方法时，index 表示行的索引，row 是当前 DOM 元素，通过 $(row) 可以进一步操作该行的子元素。

二、数据绑定与动态生成表格

2.1 从 JSON 数据生成表格

实际开发中，表格的数据通常来自服务器返回的 JSON。通过 jQuery，可以轻松将数据动态渲染为表格。例如：

// 假设从服务器获取的数据
const data = [
    { id: 1, name: "苹果", price: 5.99 },
    { id: 2, name: "香蕉", price: 2.49 },
    { id: 3, name: "橙子", price: 3.89 }
];

// 动态生成表格
const $tableBody = $("<tbody></tbody>");
data.forEach(item => {
    const $row = $("<tr></tr>");
    $row.append(`<td>${item.id}</td>`);
    $row.append(`<td>${item.name}</td>`);
    $row.append(`<td>${item.price}</td>`);
    $tableBody.append($row);
});
$("table").append($tableBody);

比喻：这就像快递员把包裹（数据）按地址（表格结构）逐个放置到对应的单元格中。通过循环和字符串拼接，可以快速构建复杂的表格。

2.2 响应式表格优化

对于移动设备，表格的可读性可能下降。通过 jQuery 可以添加响应式功能，例如隐藏非关键列或添加展开按钮。例如：

// 在移动端点击“展开”按钮显示隐藏列
$(".toggle-column").click(function() {
    const $target = $(this).data("target");
    $(`td.${$target}`).toggle();
});

配合 CSS 媒体查询，可以实现适配不同屏幕尺寸的动态效果。

三、进阶技巧：表格的动态交互

3.1 动态增删行与单元格

在用户交互场景中，可能需要根据操作增减表格行。例如，点击“添加”按钮后追加一行：

$("#add-row-btn").click(function() {
    const newRow = `
        <tr>
            <td>新商品</td>
            <td>10.99</td>
            <td><button class="delete-btn">删除</button></td>
        </tr>
    `;
    $("table tbody").append(newRow);
});

// 删除行的事件委托
$("table").on("click", ".delete-btn", function() {
    $(this).closest("tr").remove();
});

关键点：使用事件委托（on 方法）可以确保动态添加的元素也能响应事件，避免重复绑定。

3.2 表格排序与筛选

手动实现表格排序功能时，可以借助 jQuery 选择器和数组排序。例如，按价格降序排列：

$("#sort-price").click(function() {
    const $rows = $("table tbody tr").get();
    $rows.sort((a, b) => {
        const aValue = parseFloat($(a).find("td:eq(2)").text());
        const bValue = parseFloat($(b).find("td:eq(2)").text());
        return bValue - aValue; // 降序
    });
    $("table tbody").empty().append($rows);
});

扩展思路：对于复杂筛选（如多条件），可以结合表单输入，通过 filter() 方法动态过滤行。

四、性能优化与常见问题

4.1 减少 DOM 操作次数

频繁操作 DOM 会导致页面卡顿。例如，生成表格时应先拼接字符串，最后一次性插入 DOM：

// 低效写法（每次循环都操作 DOM）
for (let i = 0; i < 1000; i++) {
    $("table tbody").append("<tr>...</tr>");
}

// 高效写法（拼接字符串后一次性插入）
let html = "";
for (let i = 0; i < 1000; i++) {
    html += `<tr>...</tr>`;
}
$("table tbody").append(html);

4.2 处理跨浏览器兼容性

某些 jQuery 方法在旧版浏览器中可能表现不同。例如，使用 .prop() 替代 .attr() 设置布尔属性：

// 正确写法
$("td input").prop("checked", true);

// 错误写法（可能导致兼容性问题）
$("td input").attr("checked", "checked");

五、实际案例：带分页的动态表格

5.1 案例需求

实现一个包含分页功能的表格，要求：

  1. 从模拟接口获取数据；
  2. 每页显示5条数据；
  3. 点击页码动态加载对应数据。

5.2 实现代码

// 模拟数据源
const allData = [
    // ... 假设包含100条数据 ...
];

let currentPage = 1;
const pageSize = 5;

function renderTable(page) {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    const currentData = allData.slice(start, end);
    
    // 渲染表格（参考2.1节的代码）
    // ...
}

// 分页按钮点击事件
$(".pagination a").click(function(e) {
    e.preventDefault();
    currentPage = parseInt($(this).text());
    renderTable(currentPage);
});

扩展建议：可通过 AJAX 请求替代 allData，结合后端分页参数实现真实数据加载。

结论

通过本文的讲解，读者可以掌握 jQuery table 的核心操作、数据绑定技巧以及进阶功能的实现方法。从基础选择器到动态交互，再到性能优化，jQuery 的灵活性和简洁性使其成为处理表格交互的高效工具。对于开发者而言，结合实际项目需求，逐步探索和实践这些技术，能显著提升开发效率与用户体验。

未来，随着前端框架（如 React、Vue）的普及，原生 JavaScript 或框架结合的表格方案可能成为主流，但 jQuery table 的核心逻辑仍具有重要参考价值。希望本文能为读者提供清晰的思路，并激发进一步探索的兴趣。

最新发布

查看更多文章