jQuery. Add event listener to table.

Добавление обработчика событий на "тело" таблицы. При событии выбираются значения из ячеек. Событие "навешивается" только одно - на table > tbody. Таким образом, скрипт не "тяжелеет" с увеличением количества строк.

by Alexey Demin

HTML

<table>
  <thead>
    <tr><th>Страница</th><th>Ссылка</th></tr>
  </thead>
  <tbody>
    <tr><td>Google</td><td><a href="http://google.com">много ноликов</a></td></tr>
    <tr><td>Mail.ru</td><td><a href="http://mail.ru">Почта.ру</a></td></tr>
    <tr><td>VK</td><td><a href="http://vk.com">Пашка Дуров</a></td></tr>
    <tr><td>Microsoft</td><td><a href="http://microsoft.com">Мягкие</a></td></tr>
  </tbody>
</table>

<textarea></textarea>

CSS

table {
 margin: 5px;
 border:1px solid #26445F;
 font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;    
 cursor: default;
}
table tr:nth-child(even) { background-color:#CEDCE5; }
table tr:nth-child(even):hover { background-color:#C3D8E5; }
table tr:nth-child(odd) { background-color:#E5F4FF; }
table tr:nth-child(odd):hover { background-color:#D9EFFF; }
th {
 text-align: center;
 background-color: #45719B;
 color: white;
 font-weight: bold;
 font-size: 9pt;
 padding: 3px 6px;
}
td {
 padding: 2px;
 font-size: 8pt;
 border-bottom: 1px dotted #222;
 border-right: 1px dotted #222;
}
textarea {
    display: block;
    border: 2px dashed #000;
    background-color: #eee;
    color: #010101;
    padding: 5px;
    margin: 5px;
    width: 300px;
    height: 100px;
    font: 12px monospace;
    outline: none;
}

JavaScript

$(function() {
    $('table').on('click', 'tbody', function(event) {
        event.stopPropagation();
        event.preventDefault();
      var $cell = $(event.target).closest('td'),
          hasLink = !!$cell.has('a').length;
        var val = hasLink ? 
            'Ссылка: '+$cell.children('a').prop('href') : 
            'Ячейка таблицы: ' + $cell.text();
        $('textarea').append(val + "\n");
    });
});