【发布时间】：2018-01-30 11:11:59
【问题描述】：
首先，我还是个初学者。我做了一个测试表。当我将鼠标悬停在表格上时，我想动态更改工具提示的文本。例如，我想获取表格单元格的内容并将其作为工具提示的文本。到目前为止，我只有一个静态文本。在functionMouseOver() 中，我需要获取单元格的内容并将其作为文本放在工具提示中。我找不到执行此操作的 JavaScript 方法。我的代码如下。感谢您的帮助。
function functionMouseOver(id) {
document.getElementById(id).style.backgroundColor = "rgb(0,255,255)";
}
function functionMouseOut(id) {
document.getElementById(id).style.backgroundColor = "rgb(255,255,255)";
}
// create HTML Table body
titlenames = ["Jan", "Feb", "Mar"]
var HTMLTableBody = "";
HTMLTableBody += "<div class='container'><table id='id1' style='width:40%'>";
HTMLTableBody += "<tr>";
for (var i = 0; i < 3; i++) {
HTMLTableBody += "<th id='th" + i + "' class='class1'>" + titlenames[i] + "</th>";
}
HTMLTableBody += "</tr>";
var cnt = 0;
for (var i = 0; i < 2; i++) {
HTMLTableBody += "<tr>";
for (var j = 0; j < 3; j++) {
idstr = "td" + cnt;
HTMLTableBody += "<td id='td" + cnt + "' class='class2'" +
' onMouseOver =' + '"functionMouseOver(' + "'" + idstr + "'" + ')"' +
' onMouseOut =' + '"functionMouseOut(' + "'" + idstr + "'" + ')"' +
' data-container =' + '"body"' +
' data-placement=' + '"right"' +
' data-toggle=' + '"tooltip"' +
' title=' + '"text"' +
"></td > ";
cnt++;
}
HTMLTableBody += "</tr>";
}
HTMLTableBody += "</table></div>";
document.getElementById("HTMLBody").innerHTML = "" + HTMLTableBody;
// fill table with data
cnt = 0;
for (var i = 0; i < 2; i++) {
for (var j = 0; j < 3; j++) {
var strid = "td" + cnt;
document.getElementById(strid).innerHTML = cnt;
cnt++;
}
}
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});.class2 {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
text-align: center;
font-size: 36px;
font-family: "Lucida Console", Monaco, monospace;
}
.class1 {
background-color: rgb(200, 100, 200);
color: rgb(255, 255, 255);
text-align: center;
font-size: 36px;
font-family: "Lucida Console", Monaco, monospace;
}
table {
border-spacing: 1px;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td {
cursor: pointer;
padding: 10px;
position: relative;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="HTMLBody">
</body>【问题讨论】：
-
您可以在创建它们时设置标题，即
' title=' + '"' + cnt + '"' + -
谢谢，是的，在这种情况下会起作用，但我正在处理预订日历，不确定是否会起作用，但我会再看看。也许我可以在创建 HTML 框架之前确定文本需要是什么。然而，在 HTML 框架已经构建之后如何操作它呢？补充说明：当我在我的计算机上运行代码时，它看起来与我在论坛上“运行代码 sn-p”看到的不同
标签： javascript jquery html css twitter-bootstrap