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

by

2👍

✅

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

👤madalinivascu

1👍

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

Leave a comment