Question

首先，我还是初学者。我做了一张测试表。当我用鼠标悬停在桌子上时，我想动态更改工具提示的文本。例如，我想获取表格单元格的内容并将其作为工具提示的文本。到目前为止我只有一个静态文本。在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>

Answer 1

您可以像下面这样更新functionMouseOver()，而不是在开头设置所有标题：

function functionMouseOver(id) {
  document.getElementById(id).style.backgroundColor = "rgb(0,255,255)";  
  document.getElementById(id).setAttribute("data-original-title",document.getElementById(id).innerHTML);
}

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"' +
      "></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>

动态更改工具提示文本

1 个答案: