Вопрос по html5, twitter-bootstrap, css – Как сделать так, чтобы строки таблицы начальной загрузки были кликабельными? [Дубликат]

66

На этот вопрос уже есть ответ:

как сделать целую строку в таблице кликабельной в виде ссылки? 19 ответов

Я могу взломать это сам, но я думаю, что у начальной загрузки есть такая возможность.

Они уже кликабельны. Вы хотели, чтобы ониделат что-то при нажатии? Если так, то ceejayoz

Ваш Ответ

7   ответов
67

это довольно тривиально. v2.0 используетtable класс на всех столах.

$('.table > tbody > tr').click(function() {
    // row was clicked
});
Если вы хотите связать событие click только со строками тела таблицы, используйте селектор «.table> tbody> tr». miguelcobain
Как это сделать с конкретной таблицей? Как будто у меня есть 3 таблицы, и я хочу привязать событие click к одной строке таблицы, как мне это сделать Muneem Habib
@ MuneemHabib просто добавьте идентификатор в эту таблицу и используйте селектор идентификатора$('#my_id > tbody > tr') stefita
Используйте.on('click', function(){}); вместо того.click mauricehofman
@ MaHo Может быть, вы можете определить почему? troelskn
57

javascript плагин который добавляет эту функцию в начальную загрузку.

Когдаrowlink.js включен, вы можете сделать:

<table data-link="row">
  <tr><td><a href="foo.html">Foo</a></td><td>This is Foo</td></tr>
  <tr><td><a href="bar.html">Bar</a></td><td>Bar is good</td></tr>
</table>

Таблица будет преобразована таким образом, чтобы можно было щелкнуть всю строку, а не только первый столбец.

хорошая работа с вашей вилкой. Пожалуйста, настройте пример использования twitter-bootstrap и вашей версии начальной загрузки для этого вопроса. CSchulz
Включите обаbootstrap.css а такжеjasny-bootstrap.css и загрузитьjasny-bootstrap.js. Для использования rowlink см. Jasny.github.io / начальная загрузка / JavaScript / # rowlink Jasny - Arnold Daniels
Кажется, что принятый ответ проще, так как большинство проектов уже используют jQuery. Зачем удваивать голоса здесь? Без обид, просто пытаюсь понять, почему это решение лучше? user
@ buffer Небольшой плагин также обрабатывает нажатие ссылки и стилизацию строки, чтобы было понятно, что она работает как ссылка. Конечно, это тривиальная вещь, которую многие разработчики могут легко создать сами. То же самое можно сказать и о плагинах Bootstrap Collapse и Button. Jasny - Arnold Daniels
@ Jasny-ArnoldDaniels - ваш пример на Jasny.github.io / начальная загрузка / JavaScript / # rowlink имеет только первый столбец, кликабельный с помощью Chrome ... не работает Matt Byrne
22

которая имеетdata-href атрибут, установленный в интерактивный элемент

Заметка:data-href атрибут является действительнымtr атрибут (HTML5),href атрибуты элемента tr не являются.

$(function(){
    $('.table tr[data-href]').each(function(){
        $(this).css('cursor','pointer').hover(
            function(){ 
                $(this).addClass('active'); 
            },  
            function(){ 
                $(this).removeClass('active'); 
            }).click( function(){ 
                document.location = $(this).attr('data-href'); 
            }
        );
    });
});
хороший ответ. работать как шарм! Daroath
блестящее решение, спасибо Jonathan Laliberte
6

дал и присваиваете ему идентификатор, затем в своей таблице есть раздел tr, просто объявите первую строку, которую вы видите ниже (не забудьте установить в первой строке та

<tr onclick="input" data-toggle="modal" href="#the name for my modal windows" >
 <td><label>Some value here</label></td>
</tr>                                                                                                                                                                                   
Потрясающе! Это отлично сработало для меня с модальностями. kevthanewversi
4
<tr height="70" onclick="location.href='<%=site_adres2 & urun_adres%>'"
    style="cursor:pointer;">
-1 Этот подход довольно старый и не самый лучший. Javastript должен быть ненавязчивым, что не должно смешиваться с html. Piotr Lewandowski
Да, но угадай что? Мне не нужно загружать другой громоздкий плагин JS или выполнять проверку атрибутов внутри обратного вызова jquery. Any Day
0

вы пытаетесь прикрепить функцию при щелчке строк таблицы.

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
    rows[i].onclick = functioname(); //call the function like this
}
0

росто удалите активный класс, если он уже привязан к какой-либо строке, и переназначьте текущую строку.

    $(".table tr").each(function () {
        $(this).attr("class", "");
    });
    $(this).attr("class", "active");

Похожие вопросы