除了最后一个<；td>；元素-Jquery - Fire Click Function except for the last <td> element - Jquery

Fire Click Function except for the last <td> element - Jquery

本文关键字：gt 元素 -Jquery td lt 最后一个 | 更新日期: 2024-04-04

我在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>。因此，当用户点击网站时，会加载一个带有url的空白选项卡，并且当前页面也会更改为完整的详细信息页面。

我该如何防止这种情况发生？

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

尝试

$("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>