2012-07-03 6 views
5

各セル情報をツールチップに表示するコードを変更するにはどうすればよいですか?各セルのツールチップを表示する方法は?

http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html

$(document).ready(function() { 
/* 
* First step is to create title attributes for the rows in the table 
* This isn't needed if the required 'title' attribute is already set in the HTML in the 
* DOM 
*/ 
$('#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); 
}); 

/* Init DataTables */ 
var oTable = $('#example').dataTable(); 

/* Apply the tooltips */ 
oTable.$('tr').tooltip({ 
"delay": 0, 
"track": true, 
"fade": 250 
}); 
}); 

答えて

2

あなたは、あなたが行うことができ、それぞれのTD

$('#example tbody tr td').each(function() { 
    this.setAttribute('title', $(this).text()); 
}); 

ため、単純にsetAttributeメソッドによってタイトルを設定し、TD

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

いいえ。また、ツールチップの内容がテキストではない場合は、基本的に同じテクニックを使用して、他の場所から他の情報(たとえば、データ属性)を理論的に取得することができます。 –

9

にツールチップを呼び出すことができます

あなたの列設定で

このようにすべての行データを簡単に使用できます。 原因:これは欠落していてはなりません:

oTable.$('td').tooltip({ 
    "delay": 0, 
    "track": true, 
    "fade": 100 
}); 
+1

そこに素晴らしい小さなヒント!最近私はdatatablesで作業していましたが、それは驚くほど堅牢です。私の唯一の質問ですなぜタイトルを設定すればツールチップが公開されるのですか?私はそれで混乱しています。 – rkd80

+0

こんにちはrkd80、ツールチップは、タイトル属性を読み取るjQuery UIコンポーネント(https://jqueryui.com/tooltip/)です。 "otable。$( 'td')。tooltip(..."は、テーブルのすべてのTD要素のツールチップを表示するようにツールチップコンポーネントに指示します。 –

関連する問題