- ベストアンサー
Yahoo! UI LibraryのDataTable変換で指定したイベント属性が消える
- Yahoo! UI LibraryのDataTableを使用してウェブページを実装しています。しかし、HTMLのtableタグ内のonclick属性を指定したtd要素が、DataTableに変換すると無効になってしまいます。
- テーブルの変換により、独自に指定したonclick属性が消えてしまうため、行のクリックイベントでデータを取得し、次の画面に遷移することができません。
- Yahoo! UIから提供されているDOM操作メソッドを使用して、クリックイベントを取得することができます。しかし、別の方法を教えていただけないでしょうか？
- hvorfor
- お礼率62% (5/8)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
Yahoo! UI Libraryはまったくわかりませんが… 表示後のDOMソースを表示させてみればわかりますが、table部分は再構築されているみたいで、イベントだけでなくidやclass設定などもキャンセルされていますし、表示内容もtd直下ではなくtd内のdiv要素に設定し直しているようです。 （table以外のイベント設定は、当初のソースのままですが…） それなので、変換後テーブルに再設定（というよりも最初の設定は不要）してあげればよさそうです。 Yahoo! UIのDOM操作はわかりませんので、ごく普通に var t = document.getElementById('myMarkedUpContainer').getElementsByTagName('TABLE')[0]; t.rows[2].cells[0].onclick = function(){ alert('clicked!'); } とか、（ご質問文から見るとaddListenerが使えるらしいので） var t = document.getElementById('myMarkedUpContainer').getElementsByTagName('TABLE')[0]; YAHOO.util.Event.addListener(t, "click", function() { alert('clicked!'); }); とかを、最後に追加することでセルにイベント設定ができます。 「DataTable」に並べ替えなどの機能があるのかわかりませんが、動的に変更されるような場合、この設定が生きるのかどうかはわかりません。 そんなこともあって、個々のセルにイベントを設定して回るよりは、#1様の回答のように上位要素（documentまでいかなくてもtableなど）に代表して設定しておくほうがよさそうですね。 注）tbodyの1行目に『Loading...』という行が追加されるみたいなので、行の指定が1行ずれると思われます（theadはそのまま）。識別にちょっと注意が必要です。
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
＃１です。ついき。 alert("うえから、" + e.parentNode.rowIndex+ "ぎょうめで、" + e.cellIndex + "れつめだわ" );
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <table border="1" summary="さんぷるだじょ"> <tr> <th>abc <td>123 <td>あいう <tr> <th>def <td>456 <td>えおか </table> <script type="text/javascript"> //@cc_on var Handler = function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; 'TD' == e.nodeName && alert("いや～ん！それは「" + e./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/ + "」よ！"); }; document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', Handler, false ); </script> いべんとをどきゅめんとから、かんししちゃうぞ！！
お礼
返信が遅くなり申し訳ないです。 回答ありがとうございました。 記載していただいたソースを自分のプログラムに取り込んで実行してみました。 その結果、イベントの監視ができることにはできるのですが、 Yahoo! UIと相性が悪いのか、監視タイミングがまちまちで 今回のプログラムでは別の方法を採用したいと思います。 別件ですが、cc_onステートメントをはじめて知ったので勉強になりました。 ありがとうございました。
お礼
返信が遅くなり申し訳ないです。 回答ありがとうございました。 「表示後のDOMソースを表示」というところを見落としていました。 たしかにソースを見ると、まるっきり別ソースに書き換えられていますね・・ どうりでWicketで設定したonClickイベントが無効になるわけですね。 今回のプログラムではYahoo! UIのDOM操作で実現するか それ以外の別の方法を考えて実装したいと思います。