当前位置：首页 > jquery

jquery动态表格

2026-03-02 20:05:21jquery

jQuery动态表格的实现方法

使用jQuery创建动态表格可以方便地实现数据的增删改查操作。以下是几种常见的实现方式：

基础动态表格创建

通过jQuery的DOM操作方法可以动态生成表格结构：

// 创建表格
var table = $('<table>').addClass('my-table');
var thead = $('<thead>').appendTo(table);
var tbody = $('<tbody>').appendTo(table);

// 添加表头
$('<tr>').appendTo(thead)
  .append($('<th>').text('ID'))
  .append($('<th>').text('Name'))
  .append($('<th>').text('Action'));

// 添加数据行
for(var i=0; i<5; i++) {
  $('<tr>').appendTo(tbody)
    .append($('<td>').text(i+1))
    .append($('<td>').text('Item '+(i+1)))
    .append($('<td>').html('<button class="delete-btn">Delete</button>'));
}

// 添加到页面
$('#container').append(table);

动态添加行

为表格添加新行的典型方法：

$('#add-row-btn').click(function() {
  var rowCount = $('tbody tr').length + 1;
  var newRow = $('<tr>').append(
    $('<td>').text(rowCount),
    $('<td>').text('New Item '+rowCount),
    $('<td>').html('<button class="delete-btn">Delete</button>')
  );
  $('tbody').append(newRow);
});

动态删除行

实现行删除功能的常见方式：

$(document).on('click', '.delete-btn', function() {
  $(this).closest('tr').remove();
  // 可选：重新编号剩余行
  $('tbody tr').each(function(index) {
    $(this).find('td:first').text(index+1);
  });
});

使用AJAX加载数据

从服务器加载数据填充表格：

$.ajax({
  url: 'api/data',
  type: 'GET',
  success: function(data) {
    var tbody = $('tbody').empty();
    $.each(data, function(index, item) {
      $('<tr>').appendTo(tbody)
        .append($('<td>').text(item.id))
        .append($('<td>').text(item.name))
        .append($('<td>').html('<button class="edit-btn">Edit</button>'));
    });
  }
});

表格排序功能

实现简单的客户端排序：

$('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);
  });
});