0

我有一个包含 2 个链接的表格，

  • 如果我单击“按钮”，则链接应以“page1”为目标

  • 如果我单击整行，则应定位“page2”

我目前坚持使用 jQuery Javascript - 有人可以给我一个建议吗？

HTML & JQuery / JS

<tr>
  <td><a href="page2.html" class="info"><img src="img/img.png" alt="image" class="tlogo"/></a></td>
  <td>Some Text</td>
  <td><a href="page1.html" class="tbutton">Go to page1</a></td>
</tr>

    $(document).ready(function() {
        $('#myTable tr').click(function() {
            var href = $(this).find("a").attr("href");
            if(href) {
                window.location = href;
            }
        });
    });
4

4 回答 4

2

如果单击按钮，也会触发行单击。阻止它的方法是使用event.stopPropagation();

这将取消之后将触发的任何事件，因此如果将其放在按钮单击事件中，则不会触发行单击事件。

于 2012-07-04T10:59:00.133 回答
2

尝试类似：

$(document).ready(function() {
    $('#myTable a').click(function(e){
        window.location = $(e.currentTarget).attr('href');
        e.stopPropagation();
    });

    /* Assuming that the link you want to go to on clicking the row is in the first td */

    $('#myTable tr').click(function(e) {
        window.location = $('#myTable tr a',e.currentTarget).attr('href');
        e.stopPropagation();
    });
});
于 2012-07-04T11:03:57.250 回答
0

你可以做一件事：- 

<tr>
  <td><a href="page2.html" class="info"><img src="img/img.png" alt="image" class="tlogo"/></a></td>
  <td>Some Text</td>
  <td><a href="page1.html" class="tbutton">Go to page1</a></td>
</tr>

$(document).ready(function() {
    $('.tbutton').click(function() {            
        window.location.href = page1.html;
    });
 $('"#mytable tr').click(function() {            
            window.location.href = page2.html;
        });
});


希望这会有所帮助:)

于 2012-07-04T11:03:16.387 回答
0

工作演示 http://jsfiddle.net/5ykup/4/

API：http ://api.jquery.com/event.stopPropagation/it：防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

希望这可以帮助，

代码

   $("table tr").click(function(){
       alert("go to page1");        
    });

    $("table tr td a").click(function(event){
        alert("go to PAGE == 2"); 
        event.stopPropagation();
    });
于 2012-07-04T11:07:23.537 回答