当前位置：首页 > jquery

jquery tr

2026-03-17 14:55:10jquery

jQuery 操作表格行（tr）

jQuery 提供了多种方法来操作 HTML 表格中的行（<tr> 元素）。以下是一些常见的使用场景和方法：

选择表格行

使用 jQuery 选择器可以轻松选中表格中的行：

// 选中所有行
$('tr')

// 选中特定表格中的行（假设表格有 id="myTable"）
$('#myTable tr')

// 选中偶数行
$('tr:even')

// 选中奇数行
$('tr:odd')

// 选中第一行
$('tr:first')

// 选中最后一行
$('tr:last')

添加新行

可以使用 append() 或 appendTo() 方法向表格添加新行：

jquery tr

// 在表格末尾添加新行
$('#myTable').append('<tr><td>数据1</td><td>数据2</td></tr>');

// 在表格开头添加新行
$('#myTable').prepend('<tr><td>数据1</td><td>数据2</td></tr>');

删除行

使用 remove() 方法可以删除行：

// 删除所有行
$('#myTable tr').remove();

// 删除特定行（例如点击按钮删除当前行）
$('button.delete-row').click(function() {
    $(this).closest('tr').remove();
});

修改行内容

可以使用多种方法来修改行内容：

jquery tr

// 修改整行HTML
$('tr.some-class').html('<td>新内容1</td><td>新内容2</td>');

// 修改特定单元格
$('tr.some-class td:eq(1)').text('新内容');

// 添加CSS类
$('tr.some-row').addClass('highlight');

// 移除CSS类
$('tr.some-row').removeClass('highlight');

遍历行

使用 each() 方法可以遍历所有行：

$('#myTable tr').each(function(index) {
    console.log('行 ' + index + ': ' + $(this).text());
});

动态效果

jQuery 还支持为行操作添加动画效果：

// 淡入新行
$('#myTable').append('<tr style="display:none;"><td>新行</td></tr>').find('tr:last').fadeIn();

// 淡出行
$('tr.some-row').fadeOut(function() {
    $(this).remove();
});

这些方法可以组合使用，根据具体需求创建复杂的表格交互功能。