JQuery 在 GET 请求后重新应用斑马条纹

Question

我有一张带有“斑马条纹”CSS3 类的表格：

.zebra-stripe tr:nth-child(odd) {
    background-color: #c6e1ff;
}

.zebra-stripe tr:nth-child(even) {
    background-color: #eeeeee;
}

表格上方是一个输入字段，用户提交后将在一行前面加上 JQuery 和 POST。

这发生在：

function submit(id) {
  $.post(
    "URL",  // uses template toolkit 'c.uri_for' to actually add message in database 
    { 
      msgtype: 'some-type',
      msg: $('#some-id').val()
    }, 
    function (data) { 
      $('#table-id').prepend(data);
    }
  );
  $('#some-id').val('');
  return false;
}

这段代码在我的表格顶部添加了一行，所有的 CSS 都很好而且很漂亮。但是，在删除任何给定行时（每行都有一个“删除”按钮），使用以下 JQUERY 和 GET：

function remove(id1,rowid) {

  // uses template toolkit 'c.uri_for' to actually remove message in database
  $.get('URL', function (data) { 
    $('#' + rowid).hide();
  });

  //attempt to reapply styles
  $('#field-note-table').removeClass("zebra-stripe");
  $('#field-note-table').addClass("zebra-stripe");

  return false;
}

不重新应用 CSS（破坏斑马条纹）。删除行后如何让它重新应用 CSS？

Answer 1

只需调用 hide 即可使您的行不显示。假设您的斑马条纹 CSS 根据奇数/偶数对每一行应用不同的颜色，则隐藏的偶数行将包含在此条纹中。

如果隐藏后不需要该行，请改用remove；那么该行将不再包含在条带中：

$.get('URL', function (data) { 
    $('#' + rowid).remove();
});

否则，你可能不得不使用 JS 来选择性地条带化。

Answer 2

输入这段代码：

//attempt to reapply styles
$('#field-note-table').removeClass("zebra-stripe");
$('#field-note-table').addClass("zebra-stripe");

内部成功方法：

$.get('URL', function (data) { 
    $('#' + rowid).remove();
    //<--------- Here
  });

Answer 3

function remove(id1,rowid) {

    // uses template toolkit 'c.uri_for' to actually add message in database
    $.get('URL', function (data) { 
        $('#' + rowid).hide(0, reStripZebra);
    });

    return false;
}

function reStripZebra() {
    $('#table-id td').each(function(index) {
        if(index % 2 == 0) $(this).removeClass("zebra-stripe");
        else $(this).addClass("zebra-stripe");
    });
}