条件弹出文本，鼠标悬停取决于表格单元格中的值。 html、javascript 和 css

Question

我有一个 html 表格。

我希望当我将鼠标悬停在一个单元格上时，它会弹出一个文本。 弹出的文本应该取决于单元格内的文本。

html表格示例：

城市编号 巴黎 1454 马德里 1345 罗马 684

如果我将鼠标悬停在一个城市（巴黎）上，它应该会弹出这个国家（法国）。

我见过部分解决方案，（ https://www.w3schools.com/howto/howto_js_popup.asp https://www.w3schools.com/css/css_tooltip.asp ），但我不知道如何解决条件弹出窗口的一部分。

谢谢

Answer 1

我认为你需要一个hover

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

https://www.w3schools.com/tags/tag_abbr.asp

Answer 2

有一种更简单的方法可以在 HTML 中使用“悬停弹出窗口”。 您可以添加title属性来设置弹出窗口中显示的文本：

<td title="France">Paris</td>

您也可以通过 JavaScript 进行设置：

td.title = "France"

我不知道这是否是你要找的，但如果是，那样会更容易

Answer 3

静态生成表：-

 var list = [{ city: "Italy", country: "Rome" }, { city: "Belgium", country: "Brussels" }]; var statusCol = ""; var table = '<table><tr><th>City</th><th>Country</th></tr>'; var ID = 0; for (var i = 0; i < list.length; i++) { var row = "<tr class='staff-row' >"; row += '<td title=' + list[i].city + '>' + list[i].city + '</td>'; row += '<td title=' + list[i].country + '>' + list[i].country + '</td>' row += "</tr>" ID++; table += row; } table += '</table>'; $('#DisplayTable').html(table); $('#DisplayTable').tooltip({ 'show': true, 'selector': '.staff-row', 'placement': 'bottom', 'title': function(event) { var $this = $(this); var tds = $this.find('td'); return }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' /> <script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> Static Table:- <table class="popup"> <tr onclick="myFunction(event)"> <th title="City">City</th> <th title="Country">Country</th> </tr> <tr> <td title="Delhi">Delhi</td> <td title="India">India</td> </tr> <tr> <td title="Paris">Paris</td> <td title="France">France</td> </tr> </table><br /> Dynamic Table:- <div id="DisplayTable"></div>

Answer 4

假设这样的 DOM：

<table>
  <thead>
    <tr>
      <th>City</th>
      <th scope="col">Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Paris </th>
      <td>1454</td>
    </tr>
    <tr>
      <th scope="row">Madrid</th>
      <td>1345</td>
    </tr>
    <tr>
      <th scope="row">Roma</th>
      <td>684</td>
    </tr>
  </tbody>
</table>

假设您有一个 JS 代码显示悬停时的弹出窗口。

您可以使用data属性在每个城市单元格上设置国家/地区：

<th scope="row" data-country="France">Paris</th>

并修补 JS 代码以使用它：

const elts = document.getElementsByTagName('th');
for (let elt of elts) {
  elt.addEventListener("mouseover", (evt) => {
    const country = evt.target.getAttribute('data-country');
    yourPopupScript(country); // this trigger your popup, and you can write the country into
  });
}