jquery - 如何使鼠标指针仅悬停在数据表中的特定列上

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

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

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

如果你想选择另一个 td 那么你可以使用 :nth-of-type()

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

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