Question

我可以使用标题
为表格的每个单元格设置工具提示但是有没有办法让工具提示文本变得动态？例如，当我将鼠标悬停在表格的任何单元格上时，它会显示有关该单元格整行的信息。

<td title="something">46879</td>

使用datatables插件的示例：

$(document).ready(function() {

$('#example tbody tr').each( function() {
    var sTitle;
    var nTds = $('td', this);
    var sBrowser = $(nTds[1]).text();
    var sGrade = $(nTds[4]).text();

    if ( sGrade == "A" )
        sTitle =  sBrowser+' will provide a first class (A) level of CSS 
support.';
    else if ( sGrade == "C" )
        sTitle = sBrowser+' will provide a core (C) level of CSS support.';
    else if ( sGrade == "X" )
        sTitle = sBrowser+' does not provide CSS support or has a broken 
implementation. Block CSS.';
    else
        sTitle = sBrowser+' will provide an undefined level of CSS 
support.';

    this.setAttribute( 'title', sTitle );
} );


var oTable = $('#example').dataTable();


$( oTable.fnGetNodes() ).tooltip( {
    "delay": 0,
    "track": true,
    "fade": 250
} );
} );

这就是我的意思：

https://jsfiddle.net/pow7651t/1/

Answer 1

请查看以下解决方案。请注意，我为列添加了一个额外的变量。如果这有效，或者如果此解决方案存在任何问题，请告诉我。

$(document).ready(function() {
  var columns = ['Names', 'Reg Number', 'ID Code']
  $('#example tbody tr').each(function() {
    var cells = $('td', this);
    var titleArr = cells.map(function(index) {
    	return columns[index] + '=' + this.innerHTML;
    });
    cells.each(function(index) {
    	var finalTooltip = titleArr.filter(function(i){
      	return index !== i;
      });
      $(this).attr('title', finalTooltip.toArray().join(','))
    })
    var name = cells[0];
    var regNumber = cells[1];
    var idCode = cells[2];

  });
  var oTable = $('#example').dataTable();
  $(oTable.fnGetNodes()).tooltip({
    "delay": 0,
    "track": true,
    "fade": 250
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example">
  <thead>
    <th>Names</th>
    <th>RegNumber</th>
    <th>ID Code</th>
  </thead>
  <tbody>
    <tr>
      <td>Ryan</td>
      <td>49765</td>
      <td>34</td>
    </tr>
    <tr>
      <td>John</td>
      <td>58964</td>
      <td>42</td>
    </tr>
    <tr>
      <td>Daniel</td>
      <td>472658</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

Answer 2

您必须为表格的每个单元格创建一个标题attr

在下面的小提琴中，一个循环抛出每一行，并在其中获取除当前单元格（.not(this)）之外的每个单元格的文本和标题，然后将title属性设置为最后一个。

请参阅此Fiddle

表格的每个单元格上的动态工具提示文本

2 个答案: