如何从表中的每个新行中删除类

how to remove class from each new row in a table?

本文关键字：新行中 删除      更新时间：2023-09-26
$('#action_button').click(function(){
    var tbody = $('#table_body').prepend(''+
        '<tr class="fresh">'+
            '<td>John Doe</td>'+
            '<td>235-75-75</td>'+
            '<td>some text</td>'+
            '<td>@#!@#!%!#%</td>'+
        '</tr>');
    setTimeout(function(){
        tbody.children('tr:first-child').removeClass('fresh');
    }, 1000);
});

我将在表中添加几行«fresh»类。然后我想在一段时间后删除每个新行的类。但这并不像我计划的那样。如果添加多行，则仅在最后添加的行处删除类。如何解决这个问题?

jsfiddle

创建元素，然后将其添加到表中，保留对该元素的引用，以便在稍后删除该类时使用。这仍然允许您一次删除一个元素，但如果在删除之前添加了其他元素，则无关紧要。更新提琴在http://jsfiddle.net/HmH3n/3/

$('#action_button').click(function(){
    var $tr = $('<tr class="fresh">'+
            '<td>John Doe</td>'+
            '<td>235-75-75</td>'+
            '<td>some text</td>'+
            '<td>@#!@#!%!#%</td>'+
        '</tr>');
    $('#table_body').prepend($tr);
    setTimeout(function(){
        $tr.removeClass('fresh');
    }, 1000);
});

您可以添加一个临时类，然后删除它

$('#action_button').click(function(){
    var tbody = $('#table_body').prepend(''+
    '<tr class="fresh tmpClass">'+
        '<td>John Doe</td>'+
        '<td>235-75-75</td>'+
        '<td>some text</td>'+
        '<td>@#!@#!%!#%</td>'+
    '</tr>');

setTimeout(function(){
     $('#table_body').find('.tmpClass').removeClass('fresh').removeClass('tmpClass');
 }, 1000);

您正在尝试操作一个不是对象的变量。

var tbody与var $tbody完全不同

这里的解释是:"$variable"answers";variable"- JavaScript - jQuery

另外，您不应该在启动prepend的同时将其保存为table_body的变量。最佳实践是将它们分开进行。此外，并非所有内容都必须放在click事件中。把你的两个对象都保存在它的外面，这样它们就不会被一遍又一遍地创建。

var $tbody = $('#table_body');
$('#action_button').click(function () {
    var $tr = $('<tr class="fresh">' +
        '<td>John Doe</td>' +
        '<td>235-75-75</td>' +
        '<td>some text</td>' +
        '<td>@#!@#!%!#%</td>' +
        '</tr>');
    $tbody.prepend($tr);
    setTimeout(function () {
        $tr.removeClass('fresh');
    }, 1000);
});

如上所述，我们将ID为table_body的div保存为$tbody的对象，这样我们就可以一次又一次地使用它，而不必强迫DOM一次又一次地搜索它，因为它将其保存在内存中。我们还使用新的tr元素进行保存，以实现可重用性。

示例

相关文章：