javascript - 如何确保每次 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>