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 都很好。但是，在删除任何给定行(每行都有一个“删除”按钮)时，使用以下带有 GET 的 JQUERY:

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；那么该行将不再包含在 strip 化中:

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

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