Loop through classes

by Farzad Cyrus

HTML

<pre>Test</pre>

<table>
  <thead>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Description</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum</td>
    </tr>
  </tbody>
</table>

CSS

html,
body {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: sans-serif;
}

body {
  padding: 16px 32px;
}

pre {
  border: 1px dotted #444460;
  background: #666680;
  color: #fff;
  margin-bottom: 16px;
  line-height: 24px;
  font-size: 16px;
  padding: 16px;
}

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  margin-bottom: 16px;
  width: 100%
}

table th,
table td {
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px;
  line-height: 20px;
}

JavaScript

function select(query) {
	return document.querySelector(query);
}

function child(query){
	return this.querySelectorAll(query);
}

function getColour(index) {
  var colours = [{
    background: '604080',
    border: '503070'
  }, {
    background: '8877aa',
    border: '776699'
  }, {
    background: '22aacc',
    border: '1199bb'
  }, {
    background: '407090',
    border: '306080'
  }, {
    background: '55bb22',
    border: '44aa11'
  }, {
    background: 'ffaa00',
    border: 'ee9900'
  }, {
    background: '999999',
    border: '888888'
  }, {
    background: 'ee4060',
    border: 'dd3050'
  }, {
    background: 'e0e2e4',
    border: 'd0d2d4'
  }, {
    background: 'efe9e7',
    border: 'dfd9d7'
  }];

  // IF INDEX NUMBER IS LESS THAN NUMBER OF COLOURS
  if (index < colours.length) {
    return colours[index];

    // IF INDEX NUMBER IS GREATER THAN
  } else {
    return colours[colours.length - 1];
  }
  
  
}


var pre = document.querySelector('pre');
var preInner = '';
var tableRow = document.querySelectorAll('table tr');

// LOOP THROUGH TABLE ROWS
for (var i = 0; i < tableRow.length; i++) {
  var row = tableRow[i],
    td = row.querySelectorAll('td');

  var backgroundColour = '#' + getColour(i).background,
    borderColour = '#' + getColour(i).border;

  td[0].style.width = '24px';

  var css = {
    backgroundColor: backgroundColour,
    borderColor: borderColour
  };

  for (var key in css) {
    td[1].style[key] = css[key];
  }

  //preInner += row.querySelectorAll('td')[0].getAttribute('style');
  //preInner += '<br>';

}

preInner += 'Table Rows = ' + tableRow.length + '<br>';

pre.innerHTML = preInner;