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的行时，用户将获得供应商的完整详细信息

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");
        }
    })
});

现在您可以看到，如果单击该行，用户将进入有关供应商的完整详细信息页面。

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

如何防止这种情况发生？

如果用户点击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>

Fire单击函数除了最后一个元素 - Jquery

1 个答案: