Question

我有一个带有“zebra-stripe”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");
    });
}

在GET请求之后，JQuery重新应用斑马条带化

3 个答案: