質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1194閲覧

動的に作成されたテーブルのマウスオーバー時の行番号を知を知りたい

bing

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/18 19:48

前提・実現したいこと

javascriptを使用してデータベースの情報をテーブルで表示しています
(innerHTMLを使って表示しています)
動的に作成されたテーブルのマウスオーバー時の行番号を知を知りたい

発生している問題・エラーメッセージ

innerHTMLで表示しているため戻り値がobjectとなってしまいます

該当のソースコード

javascript
tempHtml = "<table id = "Header" , class="type10">" ;
tempHtml = tempHtml + "<thead>" ;
tempHtml = tempHtml + "<tr>" ;
tempHtml = tempHtml + "<th scope="cols">#</th>" ;
tempHtml = tempHtml + "<th scope="cols">A</th>" ;
tempHtml = tempHtml + "<th scope="cols">B</th>" ;
tempHtml = tempHtml + "</tr>" ;
tempHtml = tempHtml + "</thead>" ;
tempHtml = tempHtml + "<tbody>" ;
tempHtml = tempHtml + "<tr>" ;
tempHtml = tempHtml + "<td>" + recordSet(0) + "</td>" ;
tempHtml = tempHtml + "<td>" + recordSet(1) + "</td>" ;
tempHtml = tempHtml + "<td>" + recordSet(2) + "</td>"
tempHtml = tempHtml + "</tr>" ;
tempHtml = tempHtml + "</tbody>" ;
tempHtml = tempHtml + "</table>" ;

document.getElementById("disp").innerHTML = tempHtml;

jquery

$(function(){

$(document).on("mouseover",".type10",function(){ var tbl = document.getElementById("Header"); var idx = tbl.rows.index();  console.log(idx); });

});

試したこと

行番号を知るプロパティが分かりません

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/09/18 23:13

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
bing

2018/09/19 19:20

初めての投稿のため至らない点があり誠に申し訳ございませんでした。次回からは気を付けるようにいたします。
m.ts10806

2018/09/19 20:59

質問は編集できますので適宜対応していただければと。
guest

回答3

0

ベストアンサー

マウスオーバー時の行番号

の定義が曖昧です。
tbodyの0行目から始まる行番号でよろしいですか?
テーブルをクラスで指定していますが、同じクラスが付加されている場合
前のテーブルを引き継ぎますか?それともそのテーブルごとの行番号ですか?

とりあえずこう

javascript

1$(function(){ 2 $(document).on("mouseover",".type10 tbody tr",function(){ 3 var idx = $('.type10 tbody tr').index(this); 4 console.log(idx); 5 }); 6});

投稿2018/09/19 00:42

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

tr要素のイベントを拾えばよいのでは。

JavaScript

1$(document).on("mouseover",".type10 tr",function(){ 2var idx = this.rowIndex;  3console.log(idx); 4}); 5```**動くサンプル:**[https://jsfiddle.net/nwyc9sg4/](https://jsfiddle.net/nwyc9sg4/) 6 7【HTMLTableRowElement.rowIndex - Web API インターフェイス | MDN8[https://developer.mozilla.org/ja/docs/Web/API/HTMLTableRowElement/rowIndex](https://developer.mozilla.org/ja/docs/Web/API/HTMLTableRowElement/rowIndex)

投稿2018/09/19 00:48

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bing

2018/09/19 19:18

回答ありがとうございます!解決しました。 申し訳ございませんが、先に回答を頂いた方をベストアンサーに選ばせていただきました
guest

0

こんにちは。

以下のようにテーブルの各行に対して、mouseoverハンドラを設定するのはいかがでしょうか?

javascript

1$('tr').each(function(idx) { 2 $(this).on( 3 "mouseover", 4 function() { 5 console.log(idx); 6 } 7 ); 8});

上記コードの動作確認用のサンプルを以下に作成しました。

参考になれば幸いです。

投稿2018/09/18 22:43

編集2018/09/18 23:11
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bing

2018/09/19 19:13

回答ありがとうございます!解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問