jQuery Tooltip - 显示单元格数据中的动态内容

用户9210231

我有正在解析为表格的电子表格数据。是否可以让 jquery 工具提示在悬停时显示来自另一个单元格的数据?

卡维安 K。

你可以这样做:

$( function() {
  $( 'td' ).on( 'mouseover', function() {
    $( this ).attr( 'title', $( this ).next().text() || $( this ).text() )
  } )

  $( document ).tooltip();
} );
table {
    border-collapse: collapse;
    width: 100%
}

td, th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px
}

tr:nth-child(even) {
    background-color: #ddd
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery Tooltip显示额外的div

来自分类Dev

动态生成 jQuery Tooltip 不显示

来自分类Dev

jQuery将动态单元格添加到表中的静态单元格

来自分类Dev

jQuery Tooltip事件未在动态创建的元素上触发

来自分类Dev

jQuery Tooltip事件未在动态创建的元素上触发

来自分类Dev

在每行单个数据单元格中每行<td>拆分多个数据单元格-jQuery

来自分类Dev

如何使用jQuery更改表单元格的内容,然后用尽时动态添加更多内容?

来自分类Dev

在jQuery中访问表格单元格

来自分类Dev

jQuery数据表根据其是列名突出显示单元格

来自分类Dev

使用jQuery单击链接时,如何获取动态表中单元格的值?

来自分类Dev

jQuery从动态创建的表的单元格中获取值null而不是正确的值

来自分类Dev

如何使用jQuery动态更改表格单元格中的字体

来自分类Dev

jQuery:根据表单元格的内容可变地组合表单元格

来自分类Dev

jQuery根据单元格加载不同的HTML内容

来自分类Dev

使用“ columns.render”回调在“ Jquery Datatable Plugin”单元格中显示图像

来自分类Dev

ToolTip中的ElementName绑定

来自分类Dev

ToolTip中的ElementName绑定

来自分类Dev

Mouseover Tooltip在JQuery手风琴中不起作用

来自分类Dev

JQuery/如何显示每个表格单元格的警报?

来自分类Dev

基于单元格值的jQuery突出显示背景

来自分类Dev

JQUERY-在具有特定类的表单元格中获取数据

来自分类Dev

JQUERY-在具有特定类的表单元格中获取数据

来自分类Dev

jQuery数据表-单元格中具有类的总和列

来自分类Dev

使用jQuery和数据类将输入复制到不同的单元格中

来自分类Dev

禁用对数据表 jQuery 中的几个单元格的排序

来自分类Dev

jQuery DataTables:单元格中的超链接(数据源:Mysql 表)

来自分类Dev

获取jQuery创建的表格中某一列中所有单元格的数据

来自分类Dev

如何使用jquery从动态添加的表中删除没有id的特定<td>单元格?

来自分类Dev

单击jQuery contextMenu的表中单元格的值

Related 相关文章

  1. 1

    jQuery Tooltip显示额外的div

  2. 2

    动态生成 jQuery Tooltip 不显示

  3. 3

    jQuery将动态单元格添加到表中的静态单元格

  4. 4

    jQuery Tooltip事件未在动态创建的元素上触发

  5. 5

    jQuery Tooltip事件未在动态创建的元素上触发

  6. 6

    在每行单个数据单元格中每行<td>拆分多个数据单元格-jQuery

  7. 7

    如何使用jQuery更改表单元格的内容,然后用尽时动态添加更多内容?

  8. 8

    在jQuery中访问表格单元格

  9. 9

    jQuery数据表根据其是列名突出显示单元格

  10. 10

    使用jQuery单击链接时,如何获取动态表中单元格的值?

  11. 11

    jQuery从动态创建的表的单元格中获取值null而不是正确的值

  12. 12

    如何使用jQuery动态更改表格单元格中的字体

  13. 13

    jQuery:根据表单元格的内容可变地组合表单元格

  14. 14

    jQuery根据单元格加载不同的HTML内容

  15. 15

    使用“ columns.render”回调在“ Jquery Datatable Plugin”单元格中显示图像

  16. 16

    ToolTip中的ElementName绑定

  17. 17

    ToolTip中的ElementName绑定

  18. 18

    Mouseover Tooltip在JQuery手风琴中不起作用

  19. 19

    JQuery/如何显示每个表格单元格的警报?

  20. 20

    基于单元格值的jQuery突出显示背景

  21. 21

    JQUERY-在具有特定类的表单元格中获取数据

  22. 22

    JQUERY-在具有特定类的表单元格中获取数据

  23. 23

    jQuery数据表-单元格中具有类的总和列

  24. 24

    使用jQuery和数据类将输入复制到不同的单元格中

  25. 25

    禁用对数据表 jQuery 中的几个单元格的排序

  26. 26

    jQuery DataTables:单元格中的超链接(数据源:Mysql 表)

  27. 27

    获取jQuery创建的表格中某一列中所有单元格的数据

  28. 28

    如何使用jquery从动态添加的表中删除没有id的特定<td>单元格?

  29. 29

    单击jQuery contextMenu的表中单元格的值

热门标签

归档