Подтвердить что ты не робот

Создание таблицы строк

Интересно, какой лучший способ сделать весь tr clickable будет?

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

Пока это работает, очень жаль, что целевой URL не отображается в строке состояния браузера, в отличие от обычных ссылок.

Итак, мне просто интересно, есть ли место для оптимизации? Можно ли отображать URL-адрес, который будет перемещаться в строке состояния браузера? Или существует даже не-JavaScript способ сделать tr щелчком мыши?

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ваша лучшая ставка будет атрибутом title или javascript tooltip.

Ответ 2

Если вы не хотите использовать 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>

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

Ответ 3

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

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

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

Ответ 4

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

$(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/

Ответ 5

"

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

"

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

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

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

style="cursor:pointer;"

Ответ 6

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

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

Ответ 7

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

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

Демо-код:

<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>

Ответ 8

Я понимаю, что это старый поток с совершенно законным решением в ответ Алисы. Существует также способ сделать это без 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 равна .5em. Второе правило добавляет те же дополнения к ссылке, иначе вы окажетесь в несогласованном содержимом ячеек. Он также исправляет несколько стандартных стилей, которые у меня есть на моем а, чтобы гарантировать, что все столбцы выглядят одинаково. Вы тоже можете сделать это наоборот (добавьте стили ссылок в свой тд). С последними двумя правилами я избавляюсь от эффекта зависания по умолчанию на моих ссылках, а затем помещаю его в tr для любых таблиц с правильным классом.

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

Ответ 9

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

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

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

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

Ответ 10

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

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

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

Ответ 11

У меня была та же проблема, я решил ее, используя только 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>

Ответ 12

Если ваши целевые браузеры поддерживают стили отображения таблицы CSS, вы можете использовать Javascript для обертывания каждой строки тегом <a>, созданным для функции как 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

Ответ 13

Marko Dugonjic, в своем блоге 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.

Ответ 14

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