Делаем строку таблицы интерактивной

К счастью или к сожалению, большинство современных браузеров больше не позволяют вам управлять строкой состояния (это было возможно и популярно в те времена) из-за мошеннических намерений.

Лучше всего выбрать атрибут title или всплывающая подсказка javascript.

Если вы уже полагаетесь на javascript для щелчка, вы также можете использовать javascript для отображения URL-адреса в области состояния, изменения курсора или выполнения других действий, чтобы он больше походил на ссылку. Конечно, браузер может игнорировать код, устанавливающий область состояния.

Другой подход - фактически связать содержимое каждой ячейки. При необходимости вы можете изменить стиль, чтобы они не выглядели как традиционные ссылки.

Обратите внимание: то, что вы пытаетесь сделать, немного нарушает интуитивно понятный пользовательский интерфейс. Должно быть ясно, что щелчок по строке что-то делает. Обычно я предпочитаю помещать значок на краю каждой строки (увеличительное стекло и т. д.), Который переходит на новую страницу.

Это взлом, но вы можете добавить это в свой tr:

onmouseover = "window.status='http://bla.com/bla.htm'" 

не забудьте стилизовать свои поддельные ссылки:

tr.clickable {
    cursor: hand; 
    cursor: pointer;
}

С помощью jQuery вы можете сделать что-то в этом роде:

$('tr').click(function () {
  $(this).toggleClass('highlight_row');
}); 

Затем добавьте highlight_row в свой CSS-файл, и эта строка изменит свой класс на highlight_row. Вы можете поменять местами все, что хотите сделать в этой строке (а также изменить $ ('tr'), чтобы оно соответствовало вашей конкретной строке.

Марко Дугонжич в своем блоге maratz.com объяснил, как определить индекс строки таблицы с помощью Javascript. В его примере, когда вы наводите указатель мыши на любую ячейку в строке, вся строка выделяется.

См. Пример, http://webdesign.maratz.com/lab/row_index/

и его статья, http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/

После внесения изменений вы можете дополнительно адаптировать его, разместив действие onclick.

Вы также можете попробовать обернуть содержимое ячеек вашей строки в href и с помощью CSS подтолкнуть высоту / ширину href к внутренним границам каждой ячейки. Сама строка не будет доступна для кликов (если вы не добавили дополнительный HTML-код в строку), но большая часть содержимого строки будет действовать как обычная ссылка (курсор, строка состояния и т. д.). Я не могу вспомнить, как именно я это делал раньше, но мне удалось заставить это работать.

Обновлено: комментарий запрашивал более подробную информацию, и они были охвачены более поздним сообщением от другого пользователя, но я не осознавал этого, пока не изучил это предложение и не проверил его.

Если вы добавите тег стиля CSS «display: block» к объектам привязки в ячейках, которые вы хотите активировать, он заставит всю ячейку (без каких-либо отступов) действовать как кнопка. Курсор отображается правильно, и он предварительно просматривает место назначения ссылки в строке состояния. Все это делается с нулевым JavaScript. Удачи.

"

Наиболее распространенным (и единственным?) Решением, похоже, является использование JavaScript с использованием onclick = "javascript:document.location.href('bla.htm');" (не забывайте: установка правильного курсора с помощью onmouseover / onmouseout).

"

Команда onclick должна выглядеть так:

onclick = "window.location.href='bla.html';"

И нет необходимости делать что-либо onmouseover / -out с курсором, поскольку свойство cursor работает только тогда, когда мышь наводит курсор на элемент:

style = "cursor:pointer;"

Если в вашей таблице нет ссылок, следующий трюк должен сработать.

Поместите всю таблицу в ссылку и измените атрибут href ссылки в строках onmouseover events.

Демо-код:

<script type = "text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
    <tr onMouseOver = "setLink(this);"><td>first row</td></tr>
    <tr onMouseOver = "setLink(this);"><td>second row</td></tr>
</table>
</a> 

Если вы не хотите использовать javascript, вы можете сделать то, что предложил Крис Портер, заключив содержимое каждого элемента td в соответствующие теги привязки. Затем установите теги привязки на display: block и установите height и line-height, чтобы они были такими же, как высота td. Затем вы должны обнаружить, что td прикосновение плавно, и эффект состоит в том, что вся строка является интерактивной. Следите за отступом на td, который вызовет пробелы в интерактивной области. Вместо этого примените отступы к тегам привязки, так как они станут частью интерактивной области, если вы это сделаете.

Мне также нравится настраивать строку так, чтобы она имела эффект выделения, применяя другой цвет фона к tr: hover.

Пример

Для последней версии Bootstrap (версия 3.0.2) вот несколько быстрых CSS, чтобы показать, как это можно сделать:

table.row-clickable tbody tr td {
    padding: 0;
}

table.row-clickable tbody tr td a {
    display: block;
    padding: 8px;
}

Вот примерная таблица для работы:

<table class = "table table-hover row-clickable">
    <tbody>
        <tr>
            <td><a href = "#">Column 1</a></td>
            <td><a href = "#">Column 2</a></td>
            <td><a href = "#">Column 3</a></td>
        </tr>
    </tbody>
</table>

Вот пример, показывающий это в действии.

У меня была такая же проблема, я решил ее с помощью только CSS. Думаю, это было лучшее решение для меня, потому что я также использовал его в JSF.

Просто назначьте класс стиля для таблицы, и все готово ...

Вот оно:

CSS:

.myDataTable {
    background: 444;
    width: 100%;
}

.myDataTable thead tr {
    background-image: url('../img/tableHeader.jpg');
}

.myDataTable thead tr th {
    height: 28px;
    font-size: 14px;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable thead tr th img {
    padding-right: 5px;
    padding-top: 1px;
}

.myDataTable thead tr td {
    height: 15px;
    font-size: 11px;
    font-weight: bold;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable tbody {
    background: #f2f5f9;
}

.myDataTable tbody tr:nth-child(even) td,tbody tr.even td {
    background: #e2ebf4;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:nth-child(odd) td,tbody tr.odd td {
    background: #f7faff;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:hover td {
    background-color: #e7e7e7;
}

.myDataTable tbody tr td {
    height: 14px;
    padding-left: 5px;
    font-size: 12px;
}

.myDataTable tbody tr td a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: block;
}

.myDataTable thead tr th a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: inline;
}

Структура вашей таблицы должна быть:

<table class = "myDataTable">
 <thead>
  <tr>
   <th>Heading 1</th>
   <th>Heading 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href = "#">Data    1 </a></td>
   <td><a href = "#">Data    2 </a></td>
  </tr>
 </tbody>
</table>

Я нашел это решение, которое работает довольно хорошо:

$(document).ready(function() {
    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");

        if (href) {
            window.location = href;
        }
    });
});

Только не забудьте стилизовать курсор как указатель на tr:hover.

#table tr:hover {cursor: pointer;}

Источник: http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

Если все ваши целевые браузеры поддерживают Стили отображения таблиц CSS, вы можете использовать Javascript, чтобы заключить каждую строку в тег <a>, стилизованный под <tbody>.

Вот код JS с использованием jQuery, чтобы это произошло: (jsfiddle)

$(function() {
  $('.table-linked').each(function() {
    var table, tbody;
    table = this;
    tbody = $('tbody', this);
    tbody.children().each(function() {
      var href, row;
      row = $(this);
      href = row.attr('data-href');
      $('<a href = "' + href + '" style = "display: table-row-group" />').append(row).appendTo(table);
    });
    tbody.remove();
  });
});

Этот код преобразует таблицу, которая выглядит так:

<table class = "table-linked">
    <tbody>
        <tr data-href = "/a"><td>a</td><td>1</td></tr>
        <tr data-href = "/b"><td>b</td><td>2</td></tr>
    </tbody>
</table>

В эту структуру DOM в браузере:

<table>
    <a href = "/a" style = "display: table-row-group">
        <tr><td>a</td><td>1</td></tr>
    </a>
    <a href = "/b" style = "display: table-row-group">
        <tr><td>b</td><td>1</td></tr>
    </a>
</table>

Браузеры, похоже, не способны анализировать эту структуру как HTML-код (и, разумеется, он не будет проверять), ее необходимо создать с использованием JS.

Я понимаю, что это старая ветка с совершенно законным решением в ответе Алисы. Однако есть способ сделать это без javascript И без дублирования вашей ссылки * количества столбцов И сохранения вашей разметки / CSS в силе. Мне потребовалось время, чтобы сообразить, поэтому я решил опубликовать это здесь для других, которые тоже случайно попадут в эту ветку, как и я.

Поместите ссылку в первый столбец:

<table class = "search_results">
    <tr>
        <td><a href = "#">Some text</a></td>
        <td>more text</td>
        <td>more text</td>
    </tr>
</table>

Это прекрасная разметка, поэтому единственная реальная проблема заключается в том, чтобы эта ссылка занимала всю ширину вашей таблицы. Я сделал это вот так, используя довольно стандартный CSS:

table.search_results a {position:absolute;display:block;width:98%;}

Измените ширину на все, что хотите, и в принципе все готово и вычищено. Так что все относительно просто, однако, если у вас, как и у меня, есть гибкий / адаптивный макет, а также некоторые стандартные стили для ваших ссылок плюс некоторые отступы в ваших таблицах, вам понадобятся эти правила (необходимо скопировать сверху и добавить дополнительный).

table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}

Объяснить: Первое правило удаляет все отступы ТОЛЬКО на моем первом td. По умолчанию отступ на моем td составляет 0,5em. Второе правило добавляет тот же отступ обратно к ссылке, иначе вы получите смещенное содержимое ячеек. Он также исправляет несколько стандартных стилей, которые у меня есть, чтобы все столбцы выглядели одинаково. Вы можете сделать это и наоборот (добавьте стили ссылок в свой td). С помощью последних двух правил я избавляюсь от эффекта наведения курсора по умолчанию на мои ссылки, а затем помещаю его в tr для любых таблиц с правильным классом.

Это работает в браузерах, которые мне небезразличны, но вы, конечно, должны протестировать тех, кто вам небезразличен :) Надеюсь, я помогу кому-то сэкономить несколько минут с этой записью!