JSFiddle - React, Tailwind, and code Playground

by Rayon Dabre

HTML

<table>
  <tr class="keep">
    <td rowspan="2">
      <a href="/">
        <img src="/" alt="">
      </a>
    </td>
    <td colspan="3"><a href="/">text</a>
    </td>
  </tr>
  <tr class="test">
    <td>MF216N/A</td>
    <td>Apple</td>
    <td class="outofstock">0</td>
    <td>1&nbsp;054,24SEK</td>
    <td>
      <input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
    </td>
  </tr>

  <tr class="keep">
    <td rowspan="2">
      <a href="/">
        <img src="/" alt="">
      </a>
    </td>
    <td colspan="3"><a href="/">text</a>
    </td>
  </tr>
  <tr class="test">
    <td>MF216N/A</td>
    <td>Apple</td>
    <td class="outofstock">0</td>
    <td>1&nbsp;054,24SEK</td>
    <td>
      <input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
    </td>
  </tr>
</table>

CSS

.td_1 {
  background: yellow;
}

.td_2 {
  background: green;
}

.td_3 {
  background: pink;
}

.td_4 {
  background: orange;
}

.td_5 {
  background: blue;
}

JavaScript

var $span = $("tr.test");
$span.each(function(i, elem) {
  $(elem).find('td').each(function(index) {
    $(this).addClass(function() {
      return 'td_' + (index + 1);
    });
  });
});