我在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>