javascript - 除最后一个 <td> 元素之外的 Fire Click 函数 - Jquery

Question

我在 php 文档中有这个表

    <?php
    echo "
    <table id='supplier-detail-table' class='table table-responsive table-hover'>
            <tr><th>Supplier Name</th><th>Address</th><th>Phone</th><th>Fax</th><th>Email</th><th>Website</th></tr>";
                foreach ($all_suppliers as $supplier){
                    echo "<tr data-id=".$supplier['id']."><td class='text-center'>".$supplier['name']."</td><td>".$supplier['address']."</td><td>".$supplier['phone']."</td><td>".$supplier['fax']."</td><td>".$supplier['email']."</td><td><a href='".$supplier['url']."' target='_blank'>".$supplier['url']."</td></tr>"; 
    echo "</table>";
?>

我希望表行可单击，以便当具有特定 data-id 的行时单击后，用户将看到 vendor 的完整详细信息

JS:

$(document).ready(function(){
    $("#supplier-detail-table tr").click(function(){
        if($(this).data("id")){
            window.location="http://localhost/nams/index.php/View/Supplier/"+$(this).data("id");
        }
    })
});

现在，如您所见，如果单击该行，用户将进入有关 vendor 的完整详细信息页面。

但是最后一个td元素，我将其放置为 <a></a> 。因此，当用户单击网站时，会加载带有 url 的空白选项卡，并且当前页面也会更改为完整的详细信息页面。

如何防止这种情况发生？

如果用户点击td:last-child ，点击功能应该不起作用!这样就会打开空白页面，并且该页面不应加载到完整详细信息页面。

Answer 1

尝试

$("table tr")
.on("click", function(e) {
  if ($(this).is("tr:last")) {
    e.preventDefault();
    e.stopPropagation();
    return false
  };

  // do stuff
});

$("table tr")
.on("click", function(e) {

  if ($(this).is("tr:last")) {
    e.preventDefault();
    e.stopPropagation();
    return false
  }
  
  console.log($(this).text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>a</td>
  </tr>
    <tr>
    <td>b</td>
  </tr>
    <tr>
    <td>c</td>
  </tr>
    <tr>
    <td><a href="http://stackoverflow.com/questions/28796309/fire-click-function-except-for-the-last-td-element-jquery/">123</a></td>
  </tr>
  </table>