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

好的，首先，如果您仍然使用id，则无需在选择器中指定tr。如果你想要的话，你应该在没有空格的情况下一起编写，因为tr得到了那个id。

其次，您需要使用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: Setting location.href versus location

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将是您的表格ID，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");
});

使表行可单击

4 个答案: