How to add class or highlight all cells before/after particular cell with specific class?

Question

How can I highlight all the cells or add some class to change background color, before a particular cell (with class) in table:

So, as per above table, I'm getting cell with red background as td>class=redCell. Now I want all cells before this cell to be red and all cell to be gray after this cell. How can I achieve this using jQuery/JS/CSS?

P.S. : I'm using VueJS, if it gives soultion easily. Fiddle My Code:

<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>

http://jsfiddle.net/fsaiyed/gb5jxy0n/ – Faizan Saiyed Aug 17 '18 at 05:27 — Faizan Saiyed, Aug 17 '18 at 05:27
Sorry for that huge data! – Faizan Saiyed Aug 17 '18 at 05:27 — Faizan Saiyed, Aug 17 '18 at 05:27
That's really huge, I'll check wait – Viira Aug 17 '18 at 05:30 — Viira, Aug 17 '18 at 05:30
Thanks for the help, it's done now – Faizan Saiyed Aug 17 '18 at 06:50 — Faizan Saiyed, Aug 17 '18 at 06:50

score 2 · Accepted Answer · answered Aug 17 '18 at 06:14

Use a vuejs method

<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

score 1 · Answer 2 · answered Aug 17 '18 at 05:47

Get the index of the current td and the total siblings then add class to tthe 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>

any solution using vue js? – Faizan Saiyed Aug 17 '18 at 05:55 — Faizan Saiyed, Aug 17 '18 at 05:55
@FaizanSaiyed see my answer – madalinivascu Aug 17 '18 at 06:15 — madalinivascu, Aug 17 '18 at 06:15

How to add class or highlight all cells before/after particular cell with specific class?

2 Answers2