Question

我有一个包含表行的表，这些表行包含表数据。某些表数据字段包含链接。

我希望所有表格行都是可点击的，当点击表格行时，用户将显示另一个页面。此行为已经起作用，但是当单击表数据字段中的链接时，不应将用户重定向到其他页面。

我目前正在使用以下代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("table tr:has(td)").click(function () {
            var idForRow = $($($(this).find('td').get(0)).find('input[type=hidden]').get(0)).val();
            var url = '@Url.Action("jsDetails", "Company", new { id = "REPLACEME"})'
            window.location.href = url.replace('REPLACEME', idForRow);
        });
    });
</script>

我想要排除包含td's标记的所有a。我认为我们应该编辑的这一行是：

$("table tr:has(td)").click(function () {

此行现在仅筛选出不包含表数据字段的表行，因为它们不相关。我认为使用not()函数可以为我提供解决方案，但我无法正确使用语法。我试过了：

$("table tr:has(td) td:not(a)").click(function () {

但代码仍然到达下一行。

我的观点：

@using MemoMelder.HtmlHelpers;
@model MemoMelder.Models.CompanyListViewModel
<script src="../../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>  

@{
    ViewBag.Title = "Companies";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Companies</h2>

<table class="table table-hover table-responsive">
    <tr>
        <th></th>
        <th>Name</th>
        <th>Address</th>
        <th>Number</th>
        <th>City</th>
        <th>Website</th>
        <th>Options</th>
    </tr>
    @foreach (var item in Model.Companies)
    {
    <tr>
        <td>
        @Html.HiddenFor(modelItem => item.CompanyId)
        </td>
        <td>
        @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
        @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td>
        @Html.DisplayFor(modelItem => item.Number)
        </td>
        <td>
        @Html.DisplayFor(modelItem => item.City)
        </td>
        <td>
        @Html.SimpleLink(item.WebsiteUrl, "Website", "_blank")
        </td>
        <td>
        @Html.ActionLink("Edit", "Edit", new { item.CompanyId }, new { @class = "btn btn-default btn-xs", @role = "button" })
        @Html.ActionLink("Details", "Details", new { item.CompanyId }, new { @class = "btn btn-default btn-xs", @role = "button" })
        @Html.ActionLink("Delete", "Delete", new { item.CompanyId }, new { @class = "btn btn-default btn-xs", @role = "button" })
        </td>
    </tr>
    }
</table>

问题

以下行：

$("table tr:has(td)").click(function () {

应该修改，以便在单击包含a的表数据字段时不调用click函数。

Answer 1

您可以将:not与:has选择器一起使用：

$("table tr:not(:has(a))").click(function () {

<强> Working Demo

更新：按照建议定位td元素。

$("table td:not(:has(a))").click(function () { 
 var idForRow =$($($(this).parent().find('td').get(0)).find('input[type=hidden]').get(0)).val(); 
 alert(idForRow); 
 var url = '@Url.Action("jsDetails", "Company", new { id = "REPLACEME"})' 
 window.location.href = url.replace('REPLACEME', idForRow); 
});

Answer 2

这应该这样做：

$("table tr:has(td) td:not(:has(a))").click(function () {

Answer 3

这将触发tds，但不会触发td内的href：

    $("table td").filter(function(i,e) {   
    return !$(e).find("a").length })  
.click(function() { alert('this is td click'); });

演示：http://jsfiddle.net/8rg1nd0f/

从表中选择td不包含

3 个答案: