Table row and column row highlight

by Plippie Plop

HTML

<table>
    <thead>
        <tr>
		<th>a</th>
		<th>b</th>
		<th>c</th>
		<th>d</th>
		<th>e</th>
		<th>f</th>
		<th>g</th>
	</tr>
    </thead>    
    <tbody>
	<tr>
		<td>a</td>
		<td>b</td>
		<td>c</td>
		<td>d</td>
		<td>e</td>
		<td>f</td>
		<td>g</td>
	</tr>
	<tr>
		<td>a</td>
		<td>b</td>
		<td>c</td>
		<td>d</td>
		<td>e</td>
		<td>f</td>
		<td>g</td>
	</tr>
	<tr>
		<td>a</td>
		<td>b</td>
		<td>c</td>
		<td>d</td>
		<td>e</td>
		<td>f</td>
		<td>g</td>
	</tr>
	<tr>
		<td>a</td>
		<td>b</td>
		<td>c</td>
		<td>d</td>
		<td>e</td>
		<td>f</td>
		<td>g</td>
	</tr>
	<tr>
		<td>a</td>
		<td>b</td>
		<td>c</td>
		<td>d</td>
		<td>e</td>
		<td>f</td>
		<td>g</td>
	</tr>
	<tr>
		<td>a</td>
		<td>b</td>
		<td>c</td>
		<td>d</td>
		<td>e</td>
		<td>f</td>
		<td>g</td>
	</tr>
	<tr>
		<td>a</td>
		<td>b</td>
		<td>c</td>
		<td>d</td>
		<td>e</td>
		<td>f</td>
		<td>g</td>
	</tr>
    </tbody>
</table>

CSS

td{width:100px;height:100px;text-align:center;}
.selected{background:yellow;}

JavaScript

// select table row(s):
    $(document).on('click', 'table tbody tr', function (e) {         
      if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass('selected');
      } else {
        $(this).addClass('selected').siblings().removeClass('selected');
      }
    });


    // select table columns:
    $(document).on('click', 'table th', function (e) {
      var $row, $brow, idx;
      if (e.ctrlKey || e.metaKey) {
        $hrow = $(e.target).closest('tr');
        $brow = $('table tbody tr');
        idx = $('th', $hrow).index($(e.target));

        $brow.each(function () {
          $(this).find('td:eq(' + idx + ')').toggleClass('selected');
        });

      } else {

        $hrow = $(e.target).closest('tr');
        $brow = $('table tbody tr');
        idx = $('th', $hrow).index($(e.target));

        $brow.each(function () {
          $(this).find('td:eq(' + idx + ')').addClass('selected').siblings().removeClass('selected');
        });
      }
    });