javascript - JQuery 数据表鼠标悬停

Question

我在尝试将鼠标悬停在数据表的每个单独部分上时遇到问题。这就是该表的实现方式:

$(document).ready(function() {                                  
    var table = $("#rTable").DataTable({
        data: @Html.Raw(JsonConvert.SerializeObject(this.Model.List)),
        columns: [
            {title: "P", data: "P"},
            {title: "P", data: "P"},
            {title: "C", data: "C"},
            {title: "N", data: "N"},
            {title: "A", data: "A"},
            {title: "M", data: "M"},
        ],               
        "order": [[0, "asc"]]
        }
    );
});

我希望能够将鼠标悬停在任何表输出上，并看到弹出的详细框，然后在鼠标离开后消失。我已经看到很多关于如何使用 tr 和 td 执行此操作的答案，但我没有使用 html 来创建表。有谁对如何推进此事有任何想法吗？

Answer 1

因此，正如我们上面所讨论的，如果您希望在每个 td 上都有一个弹出窗口，并且您不知 Prop 体有多少行或单元格，则可以使用 jQuery 委托(delegate)事件。

$(document).ready(function() {
    $('#rTable').on('mouseover', 'td', function() {
        // show popup for cell
    }).on('mouseout', 'td', function() {
        // hide popup for cell
    });
});

这基本上告诉rTable在其后代上监视这些事件，并让元素知道它何时发生。然后，您可以在函数中使用 this 来访问特定的 td 元素。