Question

我使用HTML表格在我的网页上显示我的内容。我在弄清楚如何在悬停时显示列内容时遇到问题。例如，如果我在桌面上的某个单元格（已启用工具提示）上方悬停，则该单元格的内容应显示在工具提示中。

我目前正在使用JavaScript＆amp; J Query构建表，我已经在表中包含了静态数据：

var AuditLog = [
    { UserID: "DJoe1", Action: "loggedIn", Date: "17 July 2014 11:02", AppID:"MyRoster", DeviceID: "-", Notes: "None" },
    { UserID: "DJoe2", Action: "loggedIn", Date: "17 July 2014 10:49", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
    { UserID: "DJoe3", Action: "loggedIn", Date: "17 July 2014 10:29", AppID: "MyRoster", DeviceID: "-", Notes: "None" },
    { UserID: "LJenkins2", Action: "loggedIn", Date: "17 July 2014 10:15", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
    { UserID: "LJenkins1", Action: "loggedIn", Date: "17 July 2014 10:11", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" }
    ];

需要工具提示的列是Notes列。表结构：

                 var AuditHTML = "<table class='tablesorter full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive' id='auditTable'>" +
                    "<thead >" +
                       "<tr class='ui-bar-b schedule_row '>" +
                         "<th>User ID</th>" +
                         "<th>Action</th>" +
                         "<th>Date</th>" +
                         "<th>App ID</th>" +
                         "<th>Device ID</th>" +
                         "<th>Notes</th>" +
                       "</tr>" +
                     "</thead>" +
                     "<tbody>";

    for (s = 0; s < AuditLog.length; s++) {

        AuditHTML += "<tr class='schedule_row display' id='auditTr_" + s + "'>" +

          "<td> " + AuditLog[s].UserID + "</td>" +
                  "<td> " + AuditLog[s].Action + "</td>" +
                  "<td> " + AuditLog[s].Date + "</td>" +
                  "<td> " + AuditLog[s].AppID + "</td>" +
                  "<td> " + AuditLog[s].DeviceID + "</td>" +
                  "<td> " + AuditLog[s].Notes + "</td>";

        AuditHTML += "</tr>";
    }

    AuditHTML += "</tbody></table>";

$("#auditContent").html(AuditHTML);

我使用了div来显示页面上的表格：

  <div id="auditContent">
        </div>

任何帮助都会很棒！

Answer 1

你想在列上或工具提示中鼠标悬停时显示内容吗？

如果要在列上的mouser上显示内容，则可以将onmouseover事件添加到HTML表格的单元格/行，并根据需要隐藏/显示内容。

或者如果您想显示为工具提示

添加span标记并在mouser上显示span标记。

<span onMouseOver="toolTip('simple Tooltip Text here')" onMouseOut="toolTip()"
class="Text">Simple Tooltip</span>

check this link to see example

Answer 2

以下是我尝试解决您的问题所做的工作。首先，我改变了一下这个javascript变量，为前两个音符增加了更多的长度：

var AuditLog = [
{ UserID: "DJoe1", Action: "loggedIn", Date: "17 July 2014 11:02", AppID:"MyRoster", DeviceID: "-", Notes: "Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text " },
{ UserID: "DJoe2", Action: "loggedIn", Date: "17 July 2014 10:49", AppID: "Train Dispatch", DeviceID: "-", Notes: "Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content " },
{ UserID: "DJoe3", Action: "loggedIn", Date: "17 July 2014 10:29", AppID: "MyRoster", DeviceID: "-", Notes: "None" },
{ UserID: "LJenkins2", Action: "loggedIn", Date: "17 July 2014 10:15", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
{ UserID: "LJenkins1", Action: "loggedIn", Date: "17 July 2014 10:11", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" }
];

在其余的Javascript代码中，我刚刚添加了一个类note：

"<td class='note'> " + AuditLog[s].Notes + "</td>";

我还使用了一些CSS：

td, th{
    border:solid gray 1px;
    text-align:center;
    padding:5px;
}

table{
    border-collapse:collapse;
}

.note{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden; 
    width:200px;
    max-width: 200px;
}

最后我添加了一个jquery事件来为一个元素的悬停设置动画：

$('.note').hover(
            function(event){
                $(event.target).css({
                        "white-space":"normal",
                        "text-overflow":"clip",                     
                        "background-color":"#eeeeee",
                        "max-width":"500px",
                        "position":"absolute"
                    });
            }, function(event){
                $(event.target).css({
                        "white-space":"nowrap",
                        "text-overflow":"ellipsis",                     
                        "background-color":"transparent",
                        "max-width":"200px",
                        "position":"static"
                    });
            }
);

这是一个基本的解决方案，但我认为你可以用它来改进它

如何在悬停时在工具提示中显示列内容？ HTML5

2 个答案: