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

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

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

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

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

Q&A

解決済

3回答

1957閲覧

IE11のJavaScriptで、HTMLTableのrowIndexが取得できない

meesa

総合スコア12

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

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

0グッド

0クリップ

投稿2018/03/20 07:57

いつもお世話になっております。
どなたか分かる方、ご教授お願いします。

前提・実現したいこと

webアプリケーションの開発で、Tableの行をクリックしたときに、その行を黄色にハイライトし、
hidden要素に行の値の一部を取得する、というJavaSciptを埋め込んでいます。

システムの稼働環境として、IE8と11に対応する必要があり、IE8では想定した動きをすることが
確認できているのですが、IE11では動きませんでした。

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

IE11の開発者ツールを使用し、ウォッチ式を設定したところ、

JavaScript

1OnDemListClick(this.rowIndex,'#DCDCDC','#ffff00','GV_DemList');

このthis.rowIndexのところで、

'rowIndex' は定義されていません。

とエラーが出ていることが分かりました。
関数に渡った時点で、値は-1になってしまいます。

なお、IE8で確認したときには、想定どおりTableの行インデックス番号(1, 2, 3など)が
取得できているのが確認できています。

該当のソースコード

JavaScript

1var objState; 2var RowState; 3 4//申請管理No.リストで行クリック_行番号を渡す 5function OnDemListClick(RowNo, NoSelectColor, SelectColor, GVName) { 6 if (RowNo > 0) { 7 ChengeRowColor(RowNo, NoSelectColor, SelectColor, GVName); 8 9 //申請管理No.を隠し要素に格納 10 var DemNo = document.getElementById(GVName).rows[RowNo].cells[0].innerHTML; 11 document.getElementById("hid_DemNo").value = DemNo; 12 } 13} 14 15//行の色変更(行番号を渡す) 16function ChengeRowColor(RowNo, NoSelectColor, SelectColor, GVName) { 17 if (RowState != null) { 18 //行の選択が開放されるとき、偶数行ならグレー、奇数行なら淡いグレーにする 19 if (RowState % 2 == 0) { 20 document.getElementById(GVName).rows[RowState].style.backgroundColor = '#DCDCDC'; 21 } else { 22 document.getElementById(GVName).rows[RowState].style.backgroundColor = '#EEEEEE'; 23 } 24 } 25 //選択行は選択行カラーに変える 26 document.getElementById(GVName).rows[RowNo].style.backgroundColor = SelectColor; 27 RowState = RowNo; 28} 29

html

1※aspx.vbにより自動生成された結果 2 3<div id="main"> 4 <div id="DataGridErea"> 5 <div> 6 <table class="scroll1" cellspacing="0" cellpadding="3" rules="cols" id="GV_DemList" style="border-color:#999999;border-width:1px;border-style:None;border-collapse:collapse;"> 7 <thead> 8 <tr style="color:White;background-color:#000084;font-weight:bold;"> 9 <th scope="col" style="width:120px;">申請管理No.</th><th align="center" scope="col" style="width:80px;">申請種別</th><th align="center" scope="col" style="width:190px;">申請部署</th><th align="center" scope="col" style="width:100px;">状況</th><th align="center" scope="col" style="width:120px;">次判定者</th><th align="center" scope="col" style="width:90px;">作成者</th><th align="center" scope="col" style="width:140px;">完了希望日</th><th align="center" scope="col" style="width:190px;">最終更新日</th> 10 </tr> 11 </thead><tbody> 12 <tr onClick="OnDemListClick(this.rowIndex,&#39;#DCDCDC&#39;,&#39;#ffff00&#39;,&#39;GV_DemList&#39;);" style="color:Black;background-color:#EEEEEE;"> 13 <td style="width:120px;">180001</td><td align="center" style="height:1.2em;width:80px;">新規</td><td align="center" style="width:190px;">部署1</td><td align="center" style="width:100px;">検討待ち</td><td align="center" style="width:120px;">ユーザーA</td><td align="center" style="width:90px;">ユーザーB</td><td align="center" style="width:140px;">2018/3/27</td><td align="center" style="width:190px;">2018/02/22 19:07:46</td> 14 </tr> 15 </tbody> 16 </table> 17</div> 18 <input type="hidden" name="hid_DemNo" id="hid_DemNo" /> 19 </div> 20 <p class="clearLeft"></p> 21 22 <div class="DemButton"> 23 <input type="submit" name="btn_Delete" value="申請削除" onclick="return confDelete();" id="btn_Delete" class="btn_Middle" /> 24 <input id="btn_Show" type="button" value="参照/編集" 25 onclick="openDemInfoWindow();" class="btn_Middle"/> 26 </div> 27 </div>
※ASP.net Private Sub GV_DemList_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GV_DemList.RowDataBound If e.Row.RowType = DataControlRowType.DataRow Then e.Row.Attributes.Add("onClick", "OnDemListClick(this.rowIndex,'#DCDCDC','#ffff00','GV_DemList');") End If End Sub

試したこと

rowIndexを渡すのではなく、直接TableRowを渡すように、

JavaScript

1OnDemListClick(this,'#DCDCDC','#ffff00','GV_DemList');

と書き換え、関数の方もすべて対応するように修正してみた場合も、
IE8では動くのに、IE11では動きませんでした。

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

.NetFramework 4.0
Visual Studio 2010

不足事項がありましたら、ご指摘ください。
よろしくお願いいたします。

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

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

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

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

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

x_x

2018/03/20 08:18

ブレークポイントを置いて、thisが何か調べることはできるでしょうか?
sk_3122

2018/03/20 08:27

実際のプロジェクトではなく、提示されている「HTML」と「Javascript」をべろっと貼った静的HTMLを作って確認してもうまくいかないのでしょうか。私の環境だとIE8/11ともにちゃんと 1 が渡って来て 黄色くなる気がしますが・・・。Windows10/IE11 で、F12開発者ツールのドキュメントモード切替で確認しました。
meesa

2018/03/20 08:42

>x_x様 IE8と11の両方で確認したところ、IE8は[DispHTMLTableRow], IE11は[object DispHTMLTableRow]と表示されています。
meesa

2018/03/20 08:53

>sk_3122様 提示させていただいているソースのみで作成した静的HTMLでは、私の環境でも確かに1が渡り、行が黄色くなりました・・・。となると、他の部分に不具合の原因があるのでしょうか。何か見るべきポイントなどありましたら、教えていただけますと大変助かります。
meesa

2018/03/20 08:57

静的に作成したhtmlでは、IE11ではthisの中身が[object HTMLTableRowElement]になっています!
x_x

2018/03/20 09:45

IE11で、trまでの階層は正しく認識しているでしょうか?
meesa

2018/03/20 10:37

>x_x様 DOM Explorerで展開して行くと、trまで正しく階層構造で表示できるようです。(違う意味でしたらすみません…)
guest

回答3

0

IE6
IE7
IE8~
IE11(Trident)
でそれぞれレタリングエンジン(JScript エンジンも多少)が違ったりするんですがそれが関係しそう

投稿2018/03/20 14:25

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

meesa

2018/03/21 00:17

回答ありがとうございます。クライアントサイドは考慮することが多いですが、勉強します。
guest

0

主旨と違うかもしれませんが、IE8とIE11だとオブジェクトの掴み方が相当違うので
併記するしかないかもしれません

javascript

1try{ 2 window.addEventListener("DOMContentLoaded",function(){ 3 Array.prototype.forEach.call(document.querySelectorAll('tr'),function(x){ 4 x.addEventListener("click",function(e){ 5 var n=e.target; 6 while(n){ 7 if(n.nodeName==="TR"){ 8 console.log(n.rowIndex); 9 } 10 n=n.parentNode; 11 } 12 return false; 13 }); 14 }); 15 }); 16}catch(e){ 17 window.attachEvent("onload",function(e){ 18 var tr=document.getElementsByTagName('tr'); 19 for(var i=0;i<tr.length;i++){ 20 tr[i].attachEvent("onclick",function(e){ 21 var n=e.srcElement; 22 while(n){ 23 if(n.nodeName==="TR"){ 24 console.log(n.rowIndex); 25 } 26 n=n.parentNode; 27 } 28 }); 29 } 30 }); 31}

HTML

1<table> 2<tr> 3<td>1</td> 4<td>2</td> 5<td>3</td> 6</tr> 7<tr> 8<td>4</td> 9<td>5</td> 10<td>6</td> 11</tr> 12<tr> 13<td>7</td> 14<td>8</td> 15<td>9</td> 16</tr> 17</table>

投稿2018/03/20 14:15

yambejp

総合スコア114585

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

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

meesa

2018/03/21 00:14

エラー処理を利用した併記方法は浅学ながら知りませんでした! 今回は別の方の回答を元に解決することが出来ましたが、次の機会に活用したいと思います。 回答ありがとうございました。
guest

0

ベストアンサー

とりあえず "object DispHTMLTableRow" でぐぐると以下がヒットしました。

https://stackoverflow.com/questions/28273493/get-table-row-object-inside-javascript-function-dhtmlx

DHTMLX 1.5 を使ってたんだけど、3.5 にしたら問題が出たよ
(略)
IE だと src が [object DispHTMLTableRow] になるんだけどどうすればいい?

って言ってる気がします。

DHTMLX... JavaScriptライブラリでしょうか。 これ使ってますか?
(でもこのstackoverflowでも結局 原因は判明していませんね・・・)

関係ないですかね・・・


別案ですが、
サーバー側処理で e.Row.RowIndex とかで RowIndex が取れるでしょうか?
であればそれを渡させてしまうというのもアリかなと思いますが。

vb

1※試してません 2※ASP.net 3Private Sub GV_DemList_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GV_DemList.RowDataBound 4 If e.Row.RowType = DataControlRowType.DataRow Then 5 ' サーバー側の RowIndex と Javascript側の document.getElementById(GVName).rows[RowNo] の添字にずれがあると嫌なので 6 ' id を付与して そちらで制御した方が良いかもしれません(theadも含めてカウントするブラウザとtbodyだけでカウントするブラウザがあるとかないとか見た気もするので) 7 Dim rowid = "row_" & e.Row.RowIndex 8 e.Row.Attributes.Add("id", rowid) 9 e.Row.Attributes.Add("onClick", "OnDemListClick('" & rowid & "','#DCDCDC','#ffff00','GV_DemList');") 10 End If 11End Sub

どうでしょうか。

投稿2018/03/20 09:30

sk_3122

総合スコア1126

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

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

meesa

2018/03/20 11:04 編集

DHTMLXは使用していません。 うっかり知らないうちに参照が入っていたりしないかと確認しましたが、やはりありませんでした。 (このあとよく勉強しておきます) それはそれとして、サーバー側で解決するという発想が目から鱗でした! 取り急ぎ下記のように実装してみたのですが、新たにエラーが発生してしまいました。 Private Sub GV_DemList_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GV_DemList.RowDataBound If e.Row.RowType = DataControlRowType.DataRow Then Dim RowNo As Integer = e.Row.RowIndex + 1 e.Row.Attributes.Add("onClick", "OnDemListClick(" & RowNo & ",'#DCDCDC','#ffff00','GV_DemList');") End If End Sub 提示したJavaScript内の、 //選択行は選択行カラーに変える document.getElementById(GVName).rows[RowNo].style.backgroundColor = SelectColor; 上記のところで、「エラー:未定義または NULL 参照のプロパティ 'style' は取得できません」が出てしまいました。そもそもrowIndexを使うやり方を変えたほうがよいのでしょうか・・・。
meesa

2018/03/21 00:11

ご提案頂いたソースを元に、IDを振ることでrowIndexを使用しない方式に書き直したところ、思ったとおりの動きをさせることが出来ました! ありがとうございました! ASPXのコード側は頂いたソースのほぼそのままで動きました。以下参考に修正後のJavaScriptです。 //申請管理No.リストで行クリック IDを渡す function OnDemListClick(RowId, NoSelectColor, SelectColor, GVName) { var RowNo; RowNo = RowId.substr(4); if (RowNo >= 0) { ChengeRowColor(RowId, NoSelectColor, SelectColor, GVName); //申請管理No.を隠し要素に格納 var DemNo = document.getElementById(RowId).cells[0].innerHTML; document.getElementById("hid_DemNo").value = DemNo; } } //行の選択が開放されるとき、偶数行ならグレー、奇数行なら色なしにする IDを渡す function ChengeRowColor(RowId, NoSelectColor, SelectColor, GVName) { if (RowState != null) { //行の選択が開放されるとき、偶数行ならグレー、奇数行なら淡いグレーにする var RowNo; RowNo = RowState.substr(4); if (RowNo % 2 == 0) { document.getElementById(RowState).style.backgroundColor = '#EEEEEE'; } else { document.getElementById(RowState).style.backgroundColor = '#DCDCDC'; } } //選択行は選択行カラーに変える document.getElementById(RowId).style.backgroundColor = SelectColor; RowState = RowId; }
sk_3122

2018/03/23 02:25

解決したようでよかったです。おめでとうございます^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問