Сделать строку таблицы кликабельной

Question

У меня есть строка таблицы с цветом фона при наведении.Когда пользователь щелкает внутри области цвета фона, он должен захватить ссылку тега привязки внутри строки и перевести туда пользователя. Как это сделать?

<tr id="ClickableRow">
    <td>
<a href="http://somesite.com">Go Here</a>
<p> To find about all the interestng animals found in this tourist attractions including 
zebra, giraffe.....
....
</p>
    </td>
</tr>

Как захватить вкладку привязкизначение href?

 $('tr #ClickableRow').click(function () {
         window.location.href=Anchor tag's href value

        });

Answer 1

Хорошо, во-первых, нет необходимости указывать tr в селекторе, если вы все равно используете id. И если вы хотите, вы должны написать это вместе без пробелов, так как tr получил этот идентификатор.

Во-вторых, вам нужно использовать this и find(), чтобы выбрать первую ссылку внутри строки таблицы, по которой щелкнули, и получить ее атрибут href:

$('tr#ClickableRow').click(function () {
  var url = $(this).find('a:first').attr('href');
  window.location.href = url;
});

Работает также следующее:

location = $(this).find('a:first').attr( 'href' );

См .: Javascript: настройка location.href в зависимости от местоположения

Answer 2

В вашем случае

$('#ClickableRow').click(function () {
   window.location = $("#ClickableRow a:first").attr('href');
});

Вы можете проверить на http://jsfiddle.net/.

Чтобы сделать его похожим на кликабельность, вы можете добавить это

JavaScript:

$('#ClickableRow').hover(
    function () {
        if ($(this).find("th").length > 0) return;
        $(this).addClass("gridRowHover");
    },
    function () { $(this).removeClass("gridRowHover"); }
);

CSS

.gridRowHover{
    cursor: pointer;
 }

Общая функция , чтобы сделать любую строку таблицы интерактивной

function bindRowClick(itemId, eventHandler) {  
    var binder = "tr"; 
    $("#" + itemId).find(binder).click(eventHandler); 
}

ItemId будет вашим идентификатором таблицы, а eventHandler - функцией, которую нужно выполнить.

Answer 3

как насчет:

$('#ClickableRow').click(function () {
     window.location = $('a:first', this).attr('href');
});

Answer 4

вам также нужно удалить пробел между tr и #ClickableRow, иначе он будет восприниматься как дочерний элемент.

$('tr#ClickableRow').click(function () {
    window.location = $(this).find('a').attr("href");
});