JQuery dataTable鼠标悬停

时间:2016-03-02 19:12:47

标签: javascript jquery

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

$(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来创建表。有没有人对如何推进这个有任何想法?

2 个答案:

答案 0 :(得分:1)

正如我们上面讨论的那样,如果你想在每个optimal.cutpoints上弹出一个弹出窗口,并且你不确切知道有多少行或单元格,你可以使用jQuery委托事件。

# combinations
  dfoc <- as.data.frame(NULL)
  ri <- 1
  for (i in 2:(length(df)-1)) {  
    p <- combinations(n = length(df)-1, r = i, v = names(df[2:(length(df))]))
    for (r in 1:nrow(p)) {
      keep <- c("class", p[r,])
      v <- keep[-1]
      df_ <- df[, keep]
      df_$T <- rowSums(df_[,2:length(keep)])
      oc <- summary(optimal.cutpoints(X = "T", 
                                      status = "class",
                                      tag.healthy = 0,
                                      methods = "SpEqualSe",
                                      data = df_,
                                      control = control.cutpoints(),
                                      ci.fit = TRUE,
                                      conf.level = 0.95, 
                                      trace = FALSE))
      dfoc[ri,1] <- i                                    # number vars in set
      dfoc[ri,2] <- r                                    # permutation number
      dfoc[ri,3] <- paste(v, collapse=",")               # var names in set
      dfoc[ri,4] <- oc$p.table$Global$SpEqualSe[[1]][1]     # cutoff
      dfoc[ri,5] <- oc$p.table$Global$SpEqualSe[[1]][2]     # sen
      dfoc[ri,6] <- oc$p.table$Global$SpEqualSe[[1]][3]     # spe
      dfoc[ri,7] <- oc$p.table$Global$SpEqualSe[[1]][4]     # ppv
      dfoc[ri,8] <- oc$p.table$Global$SpEqualSe[[1]][5]     # npv
      dfoc[ri,9] <- oc$p.table$Global$SpEqualSe[[1]][2,2]   # sen l95
      dfoc[ri,10] <- oc$p.table$Global$SpEqualSe[[1]][2,3]  # sen u95
      dfoc[ri,11] <- oc$p.table$Global$SpEqualSe[[1]][3,2]  # spe l95
      dfoc[ri,12] <- oc$p.table$Global$SpEqualSe[[1]][3,3]  # spe u95
      dfoc[ri,13] <- oc$p.table$Global$SpEqualSe[[1]][4,2]  # ppv l95
      dfoc[ri,14] <- oc$p.table$Global$SpEqualSe[[1]][4,3]  # ppv u95
      dfoc[ri,15] <- oc$p.table$Global$SpEqualSe[[1]][5,2]  # npv l95
      dfoc[ri,16] <- oc$p.table$Global$SpEqualSe[[1]][5,3]  # npv u95
      dfoc[ri,17] <- oc$p.table$Global$AUC_CI               # auc
      ri <- ri+1
      remove(df_)
      remove(keep)
      remove(v)
      remove(oc)
    }
  }

这基本上告诉td在其后代上观察这些事件,并让元素知道它何时发生。然后,您可以在函数中使用$(document).ready(function() { $('#rTable').on('mouseover', 'td', function() { // show popup for cell }).on('mouseout', 'td', function() { // hide popup for cell }); }); 来访问该特定rTable元素。

答案 1 :(得分:1)

找到我的问题的答案:

 $('#rTable tbody td').each(function() {
     var sTitle = table.cell(this).data();
     this.setAttribute('title', sTitle);
 });


 $('#rTable tbody td[title]').tooltip({
     "delay": 0,
     "track": true,
     "fade": 250
 });