dotob/nojquery_table_select.html

## nojquery_table_select.html
<html>
<head>
  <title>brand</title>
  <style>
    .selected {background-color: lightgrey;}
    table     {border:1px solid black;}
    td     {border:1px solid black;}
  </style>
  <script type="text/javascript">
    // ready func for knowing when document is ready
    function ready(fn) {
      if (document.readyState != 'loading'){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }

    // toggle a classname on an element
    function toggleClass(el, className){
      if (el.classList) {
        // has classes, toggle
        el.classList.toggle(className);
      } else {
        // has no classes...add
        el.className = className;
      }
    }

    // add clickevents when document is ready
    ready(function(){
      var rows = document.querySelectorAll("tbody tr");
      Array.prototype.forEach.call(rows, function(el, i){
        el.addEventListener('click', function(ev){
          toggleClass(ev.target.parentElement, 'selected');
        });
      });

      var columns = document.querySelectorAll("thead td");
      Array.prototype.forEach.call(columns, function(el, i){
        el.addEventListener('click', function(ev){
          var columnClassList = ev.target.className.split(' ');
          var selector = columnClassList.map(function(cn){return '.'+cn;}).join('');
          var cells = document.querySelectorAll(selector);
          Array.prototype.forEach.call(cells, function(el, i){
            toggleClass(el, 'selected');
          });
        });
      });
    });

  </script>
</head>

<body>
  <table>
    <thead>
      <tr>
        <td class="col1">
          col1
        </td>
        <td class="col2">
          col2
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col1">
          data1
        </td>
        <td class="col2">
          data2
        </td>
      </tr>
      <tr>
        <td class="col1">
          data3
        </td>
        <td class="col2">
          data3
        </td>
      </tr>
    </tbody>
</body>
	<html>
	<head>
	<title>brand</title>
	<style>
	.selected {background-color: lightgrey;}
	table {border:1px solid black;}
	td {border:1px solid black;}
	</style>
	<script type="text/javascript">
	// ready func for knowing when document is ready
	function ready(fn) {
	if (document.readyState != 'loading'){
	fn();
	} else {
	document.addEventListener('DOMContentLoaded', fn);
	}
	}

	// toggle a classname on an element
	function toggleClass(el, className){
	if (el.classList) {
	// has classes, toggle
	el.classList.toggle(className);
	} else {
	// has no classes...add
	el.className = className;
	}
	}

	// add clickevents when document is ready
	ready(function(){
	var rows = document.querySelectorAll("tbody tr");
	Array.prototype.forEach.call(rows, function(el, i){
	el.addEventListener('click', function(ev){
	toggleClass(ev.target.parentElement, 'selected');
	});
	});

	var columns = document.querySelectorAll("thead td");
	Array.prototype.forEach.call(columns, function(el, i){
	el.addEventListener('click', function(ev){
	var columnClassList = ev.target.className.split(' ');
	var selector = columnClassList.map(function(cn){return '.'+cn;}).join('');
	var cells = document.querySelectorAll(selector);
	Array.prototype.forEach.call(cells, function(el, i){
	toggleClass(el, 'selected');
	});
	});
	});
	});

	</script>
	</head>

	<body>
	<table>
	<thead>
	<tr>
	<td class="col1">
	col1
	</td>
	<td class="col2">
	col2
	</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class="col1">
	data1
	</td>
	<td class="col2">
	data2
	</td>
	</tr>
	<tr>
	<td class="col1">
	data3
	</td>
	<td class="col2">
	data3
	</td>
	</tr>
	</tbody>
	</body>