jquery动态表格
jQuery动态表格实现方法
动态创建表格 使用jQuery的DOM操作方法可以动态生成表格结构。例如创建一个包含表头和数据的表格：
// 创建表格结构
var table = $('<table>').addClass('dynamic-table');
var thead = $('<thead>').appendTo(table);
var tbody = $('<tbody>').appendTo(table);
// 添加表头
var headerRow = $('<tr>').appendTo(thead);
['ID', 'Name', 'Email'].forEach(function(col) {
headerRow.append($('<th>').text(col));
});
// 添加数据行
var data = [
{id: 1, name: 'John', email: 'john@example.com'},
{id: 2, name: 'Jane', email: 'jane@example.com'}
];
data.forEach(function(item) {
var row = $('<tr>').appendTo(tbody);
row.append($('<td>').text(item.id));
row.append($('<td>').text(item.name));
row.append($('<td>').text(item.email));
});
// 将表格插入DOM
$('#table-container').append(table);动态添加/删除行 实现表格行的动态增删功能：
// 添加新行
$('#add-row').click(function() {
var newId = $('tbody tr').length + 1;
var newRow = $('<tr>').append(
$('<td>').text(newId),
$('<td>').text('New User'),
$('<td>').text('new@example.com'),
$('<td>').append(
$('<button>').addClass('delete-row').text('Delete')
)
);
$('tbody').append(newRow);
});
// 删除行（事件委托）
$(document).on('click', '.delete-row', function() {
$(this).closest('tr').remove();
});表格排序功能 实现点击表头排序的功能：
$('th').click(function() {
var column = $(this).index();
var rows = $('tbody tr').get();
rows.sort(function(a, b) {
var valA = $(a).find('td').eq(column).text();
var valB = $(b).find('td').eq(column).text();
return valA.localeCompare(valB);
});
$.each(rows, function(index, row) {
$('tbody').append(row);
});
});表格分页实现 为动态表格添加分页功能：
var currentPage = 1;
var rowsPerPage = 5;
function updatePagination() {
var totalRows = $('tbody tr').length;
var totalPages = Math.ceil(totalRows / rowsPerPage);
$('tbody tr').hide();
$('tbody tr').slice((currentPage-1)*rowsPerPage, currentPage*rowsPerPage).show();
$('#pagination').empty();
for(var i=1; i<=totalPages; i++) {
$('#pagination').append(
$('<button>').text(i).click(function() {
currentPage = parseInt($(this).text());
updatePagination();
})
);
}
}表格搜索过滤 添加搜索框实现表格内容过滤：
$('#search-input').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('tbody tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});注意事项
- 使用事件委托处理动态添加的元素事件
- 大型数据集考虑使用虚拟滚动提高性能
- 复杂操作可结合DataTables等jQuery插件
- 移动端需考虑响应式设计
这些方法提供了jQuery动态表格的基本功能实现，可根据实际需求组合使用或扩展功能。
