markRows

Присвоить рядам таблицы циклически три класса: first, second, third. Учитывайте, что таблица может иметь несколько <tbody>,а также <thead>, <tfoot>

by Anastasia Sharko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css">
<div id="mocha">
</div>
<div id="testArea">
  <table id="simpleTable" width="100%">
    <tr>
      <td>0.0</td>
      <td>0.1</td>
      <td>0.2</td>
    </tr>
    <tr>
      <td>1.0</td>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr>
      <td>2.0</td>
      <td>2.1</td>
      <td>2.2</td>
    </tr>
    <tr>
      <td>3.0</td>
      <td>3.1</td>
      <td>3.2</td>
    </tr>
    <tr>
      <td>4.0</td>
      <td>4.1</td>
      <td>4.2</td>
    </tr>
  </table>
  
  <table id="multiBody" width="100%">
    <tbody>
      <tr>
        <td>0.0</td>
        <td>0.1</td>
        <td>0.2</td>
      </tr>
      <tr>
        <td>1.0</td>
        <td>1.1</td>
        <td>1.2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>2.0</td>
        <td>2.1</td>
        <td>2.2</td>
      </tr>
      <tr>
        <td>3.0</td>
        <td>3.1</td>
        <td>3.2</td>
      </tr>
      <tr>
        <td>4.0</td>
        <td>4.1</td>
        <td>4.2</td>
      </tr>
    </tbody>
  </table>

  <table id="fullSet" width="100%">
    <thead>
      <tr>
        <td>0.0</td>
        <td>0.1</td>
        <td>0.2</td>
      </tr>
      <tr>
        <td>1.0</td>
        <td>1.1</td>
        <td>1.2</td>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>5.0</td>
        <td>5.1</td>
        <td>5.2</td>
      </tr>
      <tr>
        <td>6.0</td>
        <td>6.1</td>
        <td>6.2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>2.0</td>
        <td>2.1</td>
        <td>2.2</td>
      </tr>
      <tr>
        <td>3.0</td>
        <td>3.1</td>
        <td>3.2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>4.0</td>
        <td>4.1</td>
        <td>4.2</td>
     ...

CSS

tr.first{
  background-color: rgba(255, 128, 128, 0.3);
}
tr.second{
  background-color: rgba(128, 255, 128, 0.3);
}
tr.third{
  background-color: rgba(128, 128, 255, 0.3);
}

table{
  margin-top: 1em;
  border-collapse: collapse;
}
td{
  border: 1px solid black;
  text-align: center;
}
tbody,tfoot{
  border-top: 4px solid black;
}
tbody:first-child{
  border-top: none;
}

JavaScript

function markRows(table){
	var tbl = document.getElementById('table');
  var tr = tbl.rows;
  for (var i=0; i<tr.length; i+=3) {
  tr[i].classList.add('first');
  }
  for (var i=1; i<tr.length; i+=3) {
  tr[i].classList.add('second');
  }
	for (var i=2; i<tr.length; i+=3) {
  tr[i].classList.add('third');
  }
};
var simmpleTable = document.getElementById('simmpleTable');
markRows(simmpleTable);