当前位置：首页 > jquery

jquery表格

2026-03-02 10:50:47jquery

jQuery 表格操作

jQuery 提供多种方法操作 HTML 表格，包括动态添加、删除行，排序，筛选等。以下是一些常见操作的实现方式。

动态添加行

使用 append() 或 appendTo() 方法向表格添加新行。以下示例在表格末尾添加一行：

$('#myTable').append('<tr><td>New Data</td><td>Another Data</td></tr>');

动态删除行

通过 remove() 方法删除指定行。以下示例删除表格中的第三行：

jquery表格

$('#myTable tr:eq(2)').remove();

筛选表格内容

使用 filter() 方法筛选表格内容。以下示例筛选包含特定文本的行：

$('#myTable tr').filter(function() {
    return $(this).text().indexOf('Search Text') >= 0;
}).show();

表格排序

通过 JavaScript 数组的 sort() 方法对表格数据进行排序。以下示例按第一列升序排序：

jquery表格

var rows = $('#myTable tbody tr').get();
rows.sort(function(a, b) {
    var keyA = $(a).find('td').eq(0).text();
    var keyB = $(b).find('td').eq(0).text();
    return keyA.localeCompare(keyB);
});
$.each(rows, function(index, row) {
    $('#myTable tbody').append(row);
});

表格分页

使用 slice() 方法实现分页功能。以下示例显示第 1 页，每页 5 行：

var pageSize = 5;
var currentPage = 1;
$('#myTable tr').hide();
$('#myTable tr').slice((currentPage - 1) * pageSize, currentPage * pageSize).show();

表格编辑

通过 dblclick 事件实现双击编辑功能。以下示例允许双击单元格编辑内容：

$('#myTable td').dblclick(function() {
    var currentText = $(this).text();
    $(this).html('<input type="text" value="' + currentText + '" />');
    $(this).children().first().focus();
    $(this).children().first().blur(function() {
        var newText = $(this).val();
        $(this).parent().text(newText);
    });
});