Javascript 如何从表中的每一新行删除类？ $（“#操作按钮”）。单击（函数（）{ var tbody=$（'#table_body'）。前缀（''+ ''+ “约翰·多伊”+ '235-75-75'+ “一些文本”+ '@#!@#!%!#%'+ ''); setTimeout（函数（）{ t body.children（'tr:first child'）。removeClass（'fresh'）； }, 1000); });

我将在表中添加几行«fresh»类。然后我想在一段时间后删除每一行的类。但它并没有按照我计划的方式工作。如果添加多行，则仅在最后添加的行中删除该类。如何解决这个问题

---

非常感谢：）

创建元素，然后将其放在表的前面，保留对元素的引用，以便以后删除类时使用。这仍然允许您一次删除一个类元素，但在删除前一个元素之前是否添加其他元素并不重要。更新小提琴

$（“#操作按钮”）。单击（函数（）{
变量$tr=$（''）+
“约翰·多伊”+
'235-75-75'+
“一些文本”+
'@#!@#!%!#%'+
'');
$（“#表体”）。前置（$tr）；
setTimeout（函数（）{
$tr.removeClass（'fresh'）；
}, 1000);
});

您试图操作的变量不是对象

var-tbody

与

var$tbody

解释如下：

此外，在将其作为变量保存到

表体

的同时，不应启动

前置

。最好的做法是分开做。此外，并非所有内容都必须放置在

单击事件中。将两个对象都保存在外部，这样它们就不会被一次又一次地创建

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

var$tbody=$（“#table_body”）；
$（“#操作按钮”）。单击（函数（）{
变量$tr=$（''）+
“约翰·多伊”+
'235-75-75' +
“一些文本”+
'@#!@#!%!#%' +
'');
$tbody.prepend（$tr）；
setTimeout（函数（）{
$tr.removeClass（'fresh'）；
}, 1000);
});

正如您在上面看到的，我们将ID为
table_body
的div保存为
$tbody
的对象，这样我们就可以反复使用它，而不必强制DOM反复搜索它，因为它将它保存在内存中。我们还使用新的
tr
元素进行保存，以实现可重用性

您可以在第行添加临时类，然后将其删除

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);
});

$（“#操作按钮”）。单击（函数（）{
var tbody=$（'#table_body'）。前缀（''+
''+
“约翰·多伊”+
'235-75-75'+
“一些文本”+
'@#!@#!%!#%'+
'');
setTimeout（函数（）{
$（“#table_body”）.find（“.tmpClass”）.removeClass（'fresh'）.removeClass（'tmpClass'）；
}, 1000);
Remove
：first child
。你是在不知道
：first child
是什么意思的情况下编写代码的吗？它是有效的，但是…我想从每一行中一个一个地删除类。不是一次删除所有类。嗯，什么？你在哪里看到
$tbody
？它们为什么不同？嘿@FelixKling-发布了这个问题，没有添加任何内容兴，我的错。现在检查一下。无论您调用变量
tbody
还是
tbody
，都没有什么区别。并且
.prepend（）
返回选定的元素，而不是附加的元素。因此
var tbody=$（'tbody'）。prepend（…）
非常好。@FelixKling-可能非常好，但这绝对不是最佳的编码实践。将
tr
保存为对象以重复使用会更有效，与表体相同。因此，单击事件不是重新创建对象，只是附加内存中已经存在的对象。有一个细微差别。如果您尝试一次添加多行，经过一秒钟后，所有新行都将变为白色。很难解释，只需尝试添加新行而不停几秒钟。这正是我想要的！谢谢！@AlexFux您也可以尝试
$tr.prependTo（“#table_body”）.delay（1000）。toggleClass（'fresh'））
在创建
$tr
元素后，我尝试用
$tr.prependTo（“#table_body”）.delay（1000）.toggleClass（'fresh'）；
替换代码，但它不起作用。@AlexFux-我的错，
toggleClass
不使用效果队列。您需要执行类似
$tr.css（'background-color'，'00ff00'）。prependTo（'table#body'））.delay（1000）.animate（'background-color'，'ffffffff'）；
您是对的，但是我们不能使用
animate（）
来更改
背景色
属性（via），也不能将
delay（）
与
css（）
（via）一起使用。我的解决方案看起来像这样
$tr.css（'background-color'，'00ff00'）。prependTo（'table#body'）。delay（1000）.queue（function（）{$（this）.css（“background color”，“#fff”）；}）
很抱歉，在这种情况下，我无法添加任何行。我认为它不起作用。
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);
});

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