如何确保每次css类名称从以前更改时，都会应用特定样式

Question

我有一个如下所示的表结构，我想确保每次从“奇数”到“偶数”或从“偶数”到“奇数”的切换类，新类的行内的s得到应用某种风格。因此在该示例中，7个奇数行之后的第一个“偶数”行将具有比其余行更大的顶部填充的s，然后，之后的第一个“奇数”行（7行向下）将具有更大的顶部填充作为好。

我可以使用css（首选）或javascript / jquery来完成此任务。我该如何做到这一点？请注意，我没有能力使用任何不同的标记生成初始表结构，而不是如下所示。

表生成函数（仅涉及'newtable'的结构）：

  $('.table').each(function() {
    var table = $(this); // cache table object
    var head = table.find('thead th');
    var rows = table.find('tbody tr').clone(); 
    var newtable = $(
      '<table class="table mobile">' +
      '  <tbody>' +
      '  </tbody>' +
      '</table>'
    );

    // cache tbody where we'll be adding data
    var newtable_tbody = newtable.find('tbody');

    rows.each(function(i) {
      var cols = $(this).find('td');
      var classname = i % 2 ? 'even' : 'odd';

      cols.each(function(k) {
        var new_tr = $('<tr class="' + classname + '"></tr>').appendTo(newtable_tbody);
        var headEl = head.clone().get(k);
        new_tr.append(headEl);
        new_tr.append($(this));
        var isEmpty = $(headEl).hasClass('empty'); //check for table columns being used as headers, make sure they span two columns on mobile so that the regular table data isn't as wide as the column header. Note that this assumes mobile `.table`s will only ever be 2 columns
        if (isEmpty){
          $(this).attr('colspan',2);
        }
      });
    });

    $(this).after(newtable);
  }

Answer 1

您可以使用CSS + next sibling选择器实现此目的。

.odd {
  color: red;
}
.even{
  color: blue;
}

tr.odd + tr.even td {
  padding-top: 20px;
}

tr.even + tr.odd td {
  padding-top: 20px;
}

<table>
  <tr class="even">
    <td>Sample Row 01</td>
  </tr>
  <tr class="even">
    <td>Sample Row 02</td>
  </tr>
  <tr class="even">
    <td>Sample Row 03</td>
  </tr>
  <tr class="odd">
    <td>Sample Row 04</td>
  </tr>
  <tr class="odd">
    <td>Sample Row 05</td>
  </tr>
  <tr class="odd">
    <td>Sample Row 06</td>
  </tr>
  <tr class="even">
    <td>Sample Row 07</td>
  </tr>
  <tr class="even">
    <td>Sample Row 08</td>
  </tr>
  <tr class="odd">
    <td>Sample Row 09</td>
  </tr>
  <tr class="even">
    <td>Sample Row 10</td>
  </tr>
</table>

Answer 2

如果您事先没有知道这些课程，但是想要将样式设置为该课程已更改的每一行，您可以使用此javascript代码：

＆＃13;

＆＃13;

function checkTblRows(id) {
  var oldClass = undefined;
  
  $('#' + id).find('tr').each(function(i, el) {
    if (oldClass === undefined) {
      oldClass = $(el).attr('class')
      return;
    }
    if (oldClass == $(el).attr('class')) {
      oldClass = $(el).attr('class')
      return;
    } else {
      oldClass = $(el).attr('class')
      $(el).css({color: 'red'});
    }
  });
}
$(function() {
  checkTblRows('tbl1');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1">
  <tr class="a">
    <td>Class a</td>
  </tr><tr class="a">
    <td>Class a</td>
  </tr><tr class="a">
    <td>Class a</td>
  </tr><tr class="a">
    <td>Class a</td>
  </tr><tr class="b">
    <td>Class b</td>
  </tr><tr class="b">
    <td>Class b</td>
  </tr><tr class="a">
    <td>Class a</td>
  </tr><tr class="a">
    <td>Class a</td>
  </tr><tr class="a">
    <td>Class a</td>
  </tr><tr class="b">
    <td>Class b</td>
  </tr><tr class="b">
    <td>Class b</td>
  </tr><tr class="c">
    <td>Class c</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;