0

我有一个带有“斑马条纹”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？

4

3 回答 3

4

只是打电话hide使你的行，所以它不显示。假设您的斑马条纹 CSS 根据奇数/偶数对每一行应用不同的颜色，则此条纹中将包含偶数隐藏行。

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

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

否则，您可能必须使用 JS 来选择性地条带化。

于 2013-06-14T16:27:18.670 回答
1

把这段代码：

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

内部成功方法：

$.get('URL', function (data) { 
    $('#' + rowid).remove();
    //<--------- Here
  });
于 2013-06-14T16:24:46.570 回答
0 
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");
    });
}
于 2013-06-14T16:25:40.203 回答