- ベストアンサー
ツールチップにテーブル左端列の値を表示させる
- JavaScriptを使用して、マウスオーバー時にテーブルの左側の２列の値をツールチップで表示させる方法を調べています。
- 現在、mySQLにクエリを投げた結果を表示するテーブルで、マウスオーバーした行の左側の２列の値を、ツールチップでマウスポインタの付近に表示させることができないかと思案しています。
- JavaScriptの勉強を始めたばかりの初心者ですが、近日中に実装する必要があるため、アドバイスをいただけると幸いです。
- Kazu_creator
- お礼率54% (65/120)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 全部ソースを追ったわけではないのですが ※idですが数字だけはNGです。 JavaScript内でvar rowid = "row_" + tid;を行うのであればid="row_1"とするべきです。 jQueryを併用するとあまり難しいことを考えずに実装できます。 jQueryを使うことが許されない環境であれば申し訳ございません。 こんな作り方もあるよという参考程度ですが見てみてください。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7359651/ <script type="text/javascript"> $().ready ( function() { // id=tooltip-test内のtbodyの中のtrに以下の動作を設定 $('#tooltip-test tbody tr').hover ( function(e) { // hover時の処理 // hoverクラスを対象のtrに追加し背景色を変更(おまけ) $(this).addClass ( 'hover' ); // 0番目のtdと1番目のtdのhtmlを取得 var txt1 = $(this).find('td:eq(0)').html(); var txt2 = $(this).find('td:eq(1)').html(); // bodyにdiv id=tooltip要素を追加する $('body').append ( '<div id="tooltip">' + (txt1 + ',' + txt2) + '</div>' ); // ツールチップを表示 tooltip ( e.pageX, e.pageY ); },function() { // mouseout時の処理 // 対象のtrからhoverクラスを削除 $(this).removeClass ( 'hover' ); // id=tooltip要素を削除 $('#tooltip').remove(); } ).mousemove ( function(e) { // tr内でマウスが動いたときの処理 // ツールチップを表示(マウスに追従させる) tooltip ( e.pageX, e.pageY ); }); function tooltip ( x, y ) { // ツールチップの位置設定 $('#tooltip').css ({ position:'absolute', top:y-20, left:x+20 }); } }); </script>
その他の回答 (3)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 eとかe.pageXとかは http://semooh.jp/jquery/api/events/mousemove/fn/ が参考になりますでしょうか。
お礼
度々ありがとうございます！ pgaeX, pageYというのはjQueryのプロパティだったんですね。 「e」のほうはfuncitonの引数として宣言した変数ですよね…たぶん。 今後も引き続き、自分でこういうコードが書けるように勉強を続けていこうと思います。
- babu_baboo
- ベストアンサー率51% (268/525)
ていせいです。ごめん。（ぶらんくありすぎ） D を E にふくめるかは、めんどうで・・・ var E = function (r) { r.title = this.map (D, r.cells).join (' '); }; A.forEach.call (B.rows, E, C);
- babu_baboo
- ベストアンサー率51% (268/525)
こんにちは。てーぶるがよみこまれたあとで、じっこうしてね。 <script type="application/javascript; version=1.6"> var A = Array.prototype; var B = document.getElementById ('tooltip_test'); var C = [0, 1]; var D = function (c) { return this[c] ? this[c].textContent || '': ''; }; var E = function (r) { r.title = C.map (D, r.cells).join (' '); }; A.forEach.call (B.rows, E); </script>
お礼
ご回答ありがとうございます。 わたしが購入した入門書にも「this」が載ってて、ちょっと気になってました。 まだ、そこまでいってないのですが、どうやらオブジェクト指向なんかと絡んでくるらしいですね。 （.prototypeなんてあたりも） 今日はもう体力的につらいので、明日以降、どういう処理をしているのか読解してみようかと思います。
お礼
早速のご回答ありがとうございます！ 動作サンプルのページ拝見させていただきました。 まさに私がやりたかったことが実現されてますね。 （本番データは列数の多いかなりの横長なテーブルなので、スクロールするとどの列を見ているのかわからなくなってしまうのが悩みでした） まだ、javaScriptもおぼつかないのに、jQueryの書式もとなるとつらいものがありますが、回答のコードをほぼコピペすれば何とかなるかもしれません。 回答いただいたものを、処理の内容も理解しないまま貼り付けるのは邪道のような気もしますが、とりあえず今すぐに必要なので、やってみようかと思います（内容理解は後追いで）。
補足
ご回答いただいたコードを本番環境に移植し、思ったとおりの機能を実現することができました。 処理の内容も、jQueryの解説サイトなどを参考にして、なんとか理解することができました。 「e」「e.pageX」「e.pageY」の部分だけが、まだよく分かってませんが。。。 たぶん、functionをネストしてるんでしょうね。 いずれにせよ非常に助かりました。 ありがとうございます。 まだわかない部分も、これから良く考えてみます。