table jquery

jQuery 表格操作

jQuery 提供了多种方法来操作 HTML 表格，包括动态添加、删除行，修改单元格内容，以及排序和筛选功能。

动态添加行 使用 append() 或 appendTo() 方法可以向表格中添加新行。

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

删除行 通过 remove() 方法可以删除指定的行。

$('#myTable tr:last').remove();

修改单元格内容 使用 text() 或 html() 方法可以修改单元格内容。

$('#myTable tr:eq(1) td:eq(0)').text('Updated Content');

表格排序插件

jQuery 插件如 tablesorter 可以轻松实现表格排序功能。

引入插件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>

初始化排序

$(document).ready(function() {
    $('#myTable').tablesorter();
});

表格筛选功能

使用 jQuery 可以实现客户端表格筛选功能。

筛选实现

$('#searchInput').on('keyup', function() {
    var value = $(this).val().toLowerCase();
    $('#myTable tr').filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

响应式表格

对于移动设备，可以使用 stacktable.js 插件使表格响应式。

引入插件

<script src="https://cdn.jsdelivr.net/npm/stacktable.js@1.0.3/stacktable.min.js"></script>

初始化响应式表格

$('#myTable').stacktable();

表格分页

DataTables 插件提供了强大的分页功能。

引入 DataTables

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

初始化分页

$(document).ready(function() {
    $('#myTable').DataTable();
});