Question

我徒劳无功，并不知道做我所描述的CSS规则。我试过了：

 $("#tblUserList tbody tr td:eq(1)").css("cursor", "pointer");

但它不起作用。我尝试了许多不同的变化而没有成功。知道怎么做吗？我想用手形光标将特定列显示为可点击。

表格如下：

 <table id="tblUserList" style="font-size:x-small;display:none">
        <thead>
            <tr>
                <th>User ID</th>
                <th>First</th>
                <th>M</th>
                <th>Last</th>
                <th>User Name</th>
                <th>Role</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Direct</th>
                <th>Dept</th>
                <th>Service</th>
            </tr>
        </thead>
    </table>

我加载它：

  $("#tblUserList").dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("GetAllActiveUsers")',
        bJQueryUI: true,
        sProcessing: "<img src='~/Images/spinner.gif' />",
        dom: 'T<"clear">rti',
        bAutoWidth: false,
        "aoColumns": [
            { "sWidth": "1%", sClass: "smallFonts" },
            { "sWidth": "10%", sClass: "smallFonts" },
            { "sWidth": "1%", sClass: "smallFonts" },
            { "sWidth": "10%", sClass: "smallfonts" },
            { "sWidth": "8%", sClass: "smallFonts" },
            { "sWidth": "8%", sClass: "smallFonts" },
            { "sWidth": "8%", sClass: "smallFonts" },
            { "sWidth": "8%", sClass: "smallFonts" },
            { "sWidth": "8%", sClass: "smallFonts" },
            { "sWidth": "8%", sClass: "smallFonts" },
            { "sWidth": "8%", sClass: "smallFonts" },
        ]
    })

 $("#tblUserList").dataTable().fnSetColumnVis(0, false);

然后使用以下内容捕获点击次数：

 $('#tblUserList tbody').on('click', 'td', function () {
        var visIdx = $(this).index();
        if (visIdx != 0) {
            return false;
        }
        var par = this.parentNode.parentNode.id;
        var oTable = $("#tblUserList").dataTable();
        var aPos = oTable.fnGetPosition(this);
        var aData = oTable.fnGetData(aPos[0]);
        var name = aData[0];
        if (name != '') {
            GetUserDetails(name, 'user');
        }
        else {
            $("#lblError").html("The User ID is blank in that row.");
            $("#MessageDialog").dialog({ title: "No User ID" });
            $("#MessageDialog").dialog("open");
            return false;
        }
    });

Answer 1

如果您尝试选择th，请将td替换为th

这对你有用。如果您只想尝试选择第一个td

＆＃13;

table tr td:first-of-type {
  cursor: pointer;
}

＆＃13;

<table width="100%" border="1" cellspacing="10" cellpadding="0">
  <tr>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
  </tr>
  <tr>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
  </tr>
  <tr>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
  </tr>
</table>

＆＃13;

如果您尝试选择其他td，则可以使用:nth-of-type()

＆＃13;

table tr td:nth-of-type(3) { /* Select the 3rd td */
  cursor: pointer;
}

＆＃13;

<table width="100%" border="1" cellspacing="10" cellpadding="0">
  <tr>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
  </tr>
  <tr>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
  </tr>
  <tr>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
    <td>No speeches. Short speech.</td>
  </tr>
</table>

＆＃13;

Answer 2

只需将x替换为您想要添加样式的列

table tr td:nth-child(x):hover,
table tr th:nth-child(x):hover
{cursor:pointer}

如何使鼠标上的光标指针仅悬停在Datatable中的特定列上

2 个答案: