Tabulka + označené sloupce/řádky + hodnoty

Připraveno pro AC.

by kybernaut

HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>3</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<div id="vybrano">
</div>

CSS

table {
  table-layout: fixed;
  width: 100%;
  height: 300px;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.hover {
  background: pink;
}

.highlight {
  background-color: red;
}

JavaScript

$('td').on('mouseover mouseout', function() {
  $(this).prevAll().addBack()
    .add($(this).parent().prevAll()
      .children(':nth-child(' + ($(this).index() + 1) + ')')).toggleClass('hover');
});

$('table').on('click', 'td', function(e) {
  $(this).toggleClass("highlight");
  var header = e.delegateTarget.tHead.rows[0].cells[this.cellIndex],
    column = this.parentNode.cells[0];
  var id = $(header).text() + $(column).text();
  //alert([$(header).text(), $(column).text()]);
  if ($('#' + id).length) // use this if you are using id to check
  {
    $("#" + id).remove();
  } else {
    $("#vybrano").append("<p id=\"" + id + "\">" + [$(header).text(), $(column).text()] + "</p>");
  }
})