こんにちは。javaScript超初心者です。現在、mySQLにクエリを投げた結果を表示するテーブルで、マウスオーバした行の左側の２列の値を、ツールチップでマウスポインタの付近に表示させることができないかと思案しています。一応、以下のサンプル（実際のデータを単純化したものです）のようなコードを書いてみたのですが、みごとに動きません。自分なりにいろいろなサイトの情報などを調べてみたのですが、なにぶん先日javaScriptの勉強を始めたばかりなもので、どこがどういけないのか見当もつきません（恐らく、全面的に間違っているのだと思います）。勉強を進めていけば、いずれは自分でわかるようになるのかもしれませんが、とりあえず近日中に実装する必要があるので、どなたかご助言をいただけないでしょうか。 ※ツールチップを表示させる方法がわからなかったので、とりあえずalertでの表示を試みています。左列の文字列をツールチップで表示 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); } 商品ID 商品名データ1 データ2 データ3 3 テスト 12:00 12 済 515 サンプル 12:00 12 済 9 ダミー 12:00 12 済

ツールチップにテーブル左端列の値を表示させる

解決済

質問者：Kazu_creator
質問日時：2012/03/13 13:19
回答数：4件

こんにちは。javaScript超初心者です。

現在、mySQLにクエリを投げた結果を表示するテーブルで、マウスオーバした行の左側の２列の値を、ツールチップでマウスポインタの付近に表示させることができないかと思案しています。

一応、以下のサンプル（実際のデータを単純化したものです）のようなコードを書いてみたのですが、みごとに動きません。自分なりにいろいろなサイトの情報などを調べてみたのですが、なにぶん先日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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2012/03/13 15:01

こんにちは。

全部ソースを追ったわけではないのですが

※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をネストしてるんでしょうね。

いずれにせよ非常に助かりました。
ありがとうございます。

まだわかない部分も、これから良く考えてみます。

補足日時：2012/03/14 18:50

通報する

- 0
- 件

通報する

この回答へのお礼

早速のご回答ありがとうございます！

動作サンプルのページ拝見させていただきました。
まさに私がやりたかったことが実現されてますね。
（本番データは列数の多いかなりの横長なテーブルなので、スクロールするとどの列を見ているのかわからなくなってしまうのが悩みでした）

まだ、javaScriptもおぼつかないのに、jQueryの書式もとなるとつらいものがありますが、回答のコードをほぼコピペすれば何とかなるかもしれません。

回答いただいたものを、処理の内容も理解しないまま貼り付けるのは邪道のような気もしますが、とりあえず今すぐに必要なので、やってみようかと思います（内容理解は後追いで）。

通報する

お礼日時：2012/03/13 21:18

No.4

回答者： LancerVII
回答日時：2012/03/15 17:23

こんにちは。

eとかe.pageXとかは
http://semooh.jp/jquery/api/events/mousemove/fn/
が参考になりますでしょうか。

- 0
- 件

通報する

この回答へのお礼

度々ありがとうございます！

pgaeX, pageYというのはjQueryのプロパティだったんですね。
「e」のほうはfuncitonの引数として宣言した変数ですよね…たぶん。

今後も引き続き、自分でこういうコードが書けるように勉強を続けていこうと思います。

通報する

お礼日時：2012/03/15 21:47

No.3

回答者： babu_baboo
回答日時：2012/03/13 17:07

ていせいです。

ごめん。（ぶらんくありすぎ）
D を E にふくめるかは、めんどうで・・・

var E = function (r) {
　r.title = this.map (D, r.cells).join (' ');
};

A.forEach.call (B.rows, E, C);

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2012/03/13 16:46

こんにちは。

てーぶるがよみこまれたあとで、じっこうしてね。

<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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

わたしが購入した入門書にも「this」が載ってて、ちょっと気になってました。
まだ、そこまでいってないのですが、どうやらオブジェクト指向なんかと絡んでくるらしいですね。
（.prototypeなんてあたりも）

今日はもう体力的につらいので、明日以降、どういう処理をしているのか読解してみようかと思います。

通報する

お礼日時：2012/03/13 21:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！