
こんにちは。javaScript超初心者です。
現在、mySQLにクエリを投げた結果を表示するテーブルで、マウスオーバした行の左側の2列の値を、ツールチップでマウスポインタの付近に表示させることができないかと思案しています。
一応、以下のサンプル(実際のデータを単純化したものです)のようなコードを書いてみたのですが、みごとに動きません。自分なりにいろいろなサイトの情報などを調べてみたのですが、なにぶん先日javaScriptの勉強を始めたばかりなもので、どこがどういけないのか見当もつきません(恐らく、全面的に間違っているのだと思います)。
勉強を進めていけば、いずれは自分でわかるようになるのかもしれませんが、とりあえず近日中に実装する必要があるので、どなたかご助言をいただけないでしょうか。
※ツールチップを表示させる方法がわからなかったので、とりあえずalertでの表示を試みています。
<html>
<head>
<title>左列の文字列をツールチップで表示</title>
</head>
<script type="text/javascript">
function tooltip_left(tid) {
var rowid = "row_" + tid;
//IDがtooltip_testのテーブルオブジェクトを取得
var table_ob = document.getElementById("tooltip_test");
//IDがrowidの行(オブジェクト??)を取得
var row_ob = document.getElementById(rowid);
//上記の行が何行目か調べてrow_numに格納
var row_num = table_ob.row_ob.rows
//left_textに該当行の左から1番目、2番目のテキストを格納
left_text = table_ob.rows[row_num].cells[0] + ":" + table_ob.rows[row_num].cells[1];
//ツールチップが良く分からないのでalertで表示してみる
window.alert(left_text);
}
</script>
<body>
<table id="tooltip_test">
<tr>
<th>商品ID</th><th>商品名</th><th>データ1</th><th>データ2</th><th>データ3</th>
</tr>
<tr id="3" onMouseOver="tooltip_left(3)">
<td>3</td><td>テスト</td><td>12:00</td><td>12</td><td>済</td>
</tr>
<tr id="515" onMouseOver="tooltip_left(515)">
<td>515</td><td>サンプル</td><td>12:00</td><td>12</td><td>済</td>
</tr>
<tr id="9" onMouseOver="tooltip_left(9)">
<td>9</td><td>ダミー</td><td>12:00</td><td>12</td><td>済</td>
</tr>
</table>
</body>
</html>
No.1ベストアンサー
- 回答日時:
こんにちは。
全部ソースを追ったわけではないのですが
※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>
この回答への補足
ご回答いただいたコードを本番環境に移植し、思ったとおりの機能を実現することができました。
処理の内容も、jQueryの解説サイトなどを参考にして、なんとか理解することができました。
「e」「e.pageX」「e.pageY」の部分だけが、まだよく分かってませんが。。。
たぶん、functionをネストしてるんでしょうね。
いずれにせよ非常に助かりました。
ありがとうございます。
まだわかない部分も、これから良く考えてみます。
早速のご回答ありがとうございます!
動作サンプルのページ拝見させていただきました。
まさに私がやりたかったことが実現されてますね。
(本番データは列数の多いかなりの横長なテーブルなので、スクロールするとどの列を見ているのかわからなくなってしまうのが悩みでした)
まだ、javaScriptもおぼつかないのに、jQueryの書式もとなるとつらいものがありますが、回答のコードをほぼコピペすれば何とかなるかもしれません。
回答いただいたものを、処理の内容も理解しないまま貼り付けるのは邪道のような気もしますが、とりあえず今すぐに必要なので、やってみようかと思います(内容理解は後追いで)。
No.4
- 回答日時:
度々ありがとうございます!
pgaeX, pageYというのはjQueryのプロパティだったんですね。
「e」のほうはfuncitonの引数として宣言した変数ですよね…たぶん。
今後も引き続き、自分でこういうコードが書けるように勉強を続けていこうと思います。
No.3
- 回答日時:
ていせいです。
ごめん。(ぶらんくありすぎ)D を E にふくめるかは、めんどうで・・・
var E = function (r) {
r.title = this.map (D, r.cells).join (' ');
};
A.forEach.call (B.rows, E, C);
No.2
- 回答日時:
こんにちは。
てーぶるがよみこまれたあとで、じっこうしてね。<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なんてあたりも)
今日はもう体力的につらいので、明日以降、どういう処理をしているのか読解してみようかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
ハイパーリンクを別ウインドウ...
-
ブルダウン選択でページの表示...
-
JavaScriptでテーブルをクリッ...
-
テーブル内に表示されている数...
-
Tablesorteを2行一組でソートする
-
テーブルの項目の値取得
-
tdの中をクリックしたらチェッ...
-
クリックされた罫表セルの行番...
-
【UWSC】HTML内のある部分を抽...
-
iframeの内のTable(rowspan有り...
-
サイト内の物件を複数の検索条...
-
tabindexの取得
-
return trueとreturn falseの用...
-
指定したタグを書き換えるには?
-
selectメニューのselectedの位...
-
JSPとJavaScriptの連携について...
-
ラジオボタンにタブインデック...
-
【JavaScript】プルダウンで数...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
ハイパーリンクを別ウインドウ...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
一覧から選択した行の行番号を...
-
CSVデータをツリー表示させたい
-
テーブルの項目の値取得
-
JavaScriptでテーブルをクリッ...
-
至急!GetElementById でtdの...
-
jspでのArrayListの値の表示
-
JavaScriptで特定のtdタグにcla...
-
javascript クリックすると、あ...
-
ビンゴゲームの作成
-
【UWSC】HTML内のある部分を抽...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
まとめてセルの色を変えたい
-
指定した要素を含んだテキスト...
-
VBScriptの繰り返し文について
-
テーブル内に表示されている数...
おすすめ情報