如何添加类别或突出显示具有特定类别的特定单元格之前/之后的所有单元格？

Question

在表中的特定单元格（带有类）之前，如何突出显示所有单元格或添加一些类以更改背景颜色：

因此，按照上表，我正在将红色背景的单元格设为td> class = redCell。现在，我希望此单元格之前的所有单元格均为红色，而此单元格之后的所有单元格均为灰色。如何使用jQuery / JS / CSS做到这一点？

P.S。 ：我正在使用VueJS，如果它可以很容易地带来灵魂的话。 Fiddle我的代码：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Instance</th>
      <th v-for="(items, index) in tableHeaders" v-if="items.type != 'start' && items.type != 'endevent' && items.type != 'intermediatethrowevent'"><span>{{items.name}}</span></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(items, index) in tableData">
      <td>{{items.id}}</td>
      <td v-for="(headerItem, headerIndex) in tableHeaders" v-if="headerItem.type != 'start' && headerItem.type != 'endevent' && headerItem.type != 'intermediatethrowevent'" :class=" { redCell : (items.currentStatus == headerItem.id) }">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

使用vuejs方法

<td v-for="(headerItem, headerIndex) in tableHeaders" v-if="headerItem.type != 'start' && headerItem.type != 'endevent' && headerItem.type != 'intermediatethrowevent'" :class=" assignClass(items,headerItem)">

js：

      methods: {
        assignClass(items,headerItem) {
        if(items.currentStatus == headerItem.id) {
        items.past = 1;
        return 'redCell';
        }
           if(typeof items.past == "undefined") {
            return "greenCell";
           } else {
           return "blueCell"
           }
        }

  }

demo

Answer 2

获取当前td的索引和同胞总数，然后将类添加到td

document.querySelectorAll('.red').forEach(function(item) {
  // get the index of current td
  let getCurrIndexNo = $(item).index();
  //get ttal children
  let getTotalChild = $(item).parent().children().length;

  for (let x = 0; x <= getCurrIndexNo; x++) {
    $(item).parent().find('td').eq(x).addClass('customRed')
  }

  for (let y = (getCurrIndexNo + 1); y < getTotalChild; y++) {

    $(item).parent().find('td').eq(y).addClass('customGrey')
  }


})

.table tr td {
  padding: 15px;
}

.customRed {
  background: #ff002199;
  color: black;
}

.customGrey {
  background: gray;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1px solid black" class="table">
  <tr>
    <td>1</td>
    <td>1</td>
    <td class="red">3</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="red">1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td class="red">1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td class="red">1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="red">1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td class="red">1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>