ホームページ作成　title属性を保持したい

2023/08/16 02:43

このQ&Aのポイント

初心者の方がホームページ作成において、title属性を保持したい場合の方法について教えてください。
問題の空欄にカーソルを当てると答が出現し、問題をソートできるホームページを作成しています。ただし、ソートした後にポップアップの属性が消え、小さい文字になってしまいます。ソートしてもとの属性で大きな文字で表示する方法について教えてください。
以下のURLにあるページを参考にしましたが、問題の空欄にカーソルを当てると答が出現しない問題があります。解決方法を教えてください。 http://issangogo.sakura.ne.jp/weblib2011-1-2/narabekae10.html

ベストアンサー

ホームページ作成　title 属性を保持したい

2011/12/20 18:41

初心者ですが、jQueryやJavaScriptなどの初心者用ページを見ながら、目的とするページができるように見よう見まねでコピペしてなんとか作っています。やりたいこと (1)　問題の空欄にカーソルを当てると答が出現すること。 (2)　問題をソートすること。ここまではできましたが、ソートするとポップアップの属性が消えてしまい、小さな字になってしまいます。ソートしてももとの属性で大きな字で出したいのです。ページを見てもらったほうがいいかと思いアドレスを載せておきます。ご検討ください。 http://issangogo.sakura.ne.jp/weblib2011-1-2/narabekae10.html 以下は記述文です <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.balloon.js"></script> <title>時計</title> <script> var tds = [ ["This clock is ten minutes <a title='slow'>(________)</a>.<br>この時計は１０分遅れている","","　　　"], ["This clock is ten minutes <a title='fast'>(________).<br>この時計は１０分進んでいる","","　　　"], ["This clock <a title='loses'>(________) a minute a day.<br>この時計は１日に１分遅れる","","　　　　"], ["This clock <a title='gains'>(________) a minute a day.<br>この時計は１日に１分進む","","　　　　"] ]; $(function() { function draw() { var tag = ''; $.each(tds, function(i, val) { tag += '<tr><td>'+ val[0] + '</td><td>' + val[1] + '</td><td>' + val[2] + '</td></tr>'; }); $('tbody').html(tag); } $('th').click(function() { var arrow = $('span', this); var col = $('th').index(this); tds.sort(function(a, b) { return Math.random() < Math.random() ? -1 : 1; }); $(this).siblings().find('span').html(''); draw(); }); draw(); }); </script> <style> th, td { border: 1px solid black; padding: 2px; } th { background-color: #ccc; cursor: pointer; } </style> <style type="text/css">  </style> <script type="text/javascript"> $(function(){ // 全要素をからTITLE属性を持っている要素だけに絞る $("body *").filter(function(){ return this.title && this.title.length>0; }).each(function(){ // TITLE属性を持っている要素に適用する // あとで使う var self = $(this), title = self.attr("title"); // TITLE属性を持っている要素にhover()で self.hover( // mouseover function(e){ // このeはevent自体を意味する // TITLEがあるとブラウザのチップが出るので一時的に空にしておく self.attr("title",""); // とりあえず表示するtip要素を生成しておく $("body").append("<div id='title-tip'>"+title+"</div>"); $("#title-tip").css({ position: "absolute", // e.pageX(Y)でカーソルが要素に乗った時点でのX(Y)座標を取得する top: e.pageY+(-15), // カーソルと表示したtipが重なるとチラつくので少しずらす left: e.pageX+15 }); }, // mouseout function(){ // mouseoverで空にしたTITLEを戻す self.attr("title",title); // 要素から離れた場合はtipを非表示にして削除しておく $("#title-tip").hide().remove(); } ); // 要素上でカーソルが移動した場合は、逐一tipの位置を変える self.mousemove(function(e){ $("#title-tip").css({ top: e.pageY+(-15), left: e.pageX+15 }); }); }); }); </script> </head> <body bgcolor="YellowGreen"> <font size=5> <table><thead><tr><th>問　題　ソート<span></span></th><th>__ヒント１__<span></span></th><th>___ヒント２ ___<span></span></th></tr></thead><tbody></tbody></table> </font> </body> </html>

issan55
お礼率71% (5/7)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

e_watt
ベストアンサー率71% (25/35)

2011/12/22 19:09 回答No.2

(行番号は質問文中のURLのソースのものです。) まず、title属性を持っている要素を書き換える関数について。 72行目から123行目までの無名関数全体が、 $( ) で囲われています。この様子を3行に圧縮するとこんな感じです。 <script type="text/javascript"> $(　function(){ <ここに約50行分の本体> }　); </script> これを、$() でくくるのをやめて、名前を付けます。 _71:　<script type="text/javascript"> _72:　　function addTitleProp() {　　　　　// 頭の "$(" を削って適当な名前を付ける　　　　　　　(....関数の中身はそのまま) 123:　　}　　　　　　　　　　　　　　　　　// 末尾の ");" を削る 124:　</script> 問題文をテーブルで表示させる部分(tbodyに突っ込んでいる部分)が25行目にあるので _25:　　$('tbody').html(tag); _26:　　addTitleProp();　　　　　　// ←この行を追加して関数を呼ぶ変更点は以上です。 ※ただし、もしかすると jQuery の流儀に則るには $( ); で囲ったまま　なんとかするように書くべきなのかもしれません。

質問者

お礼 2011/12/22 22:36

e wattさん本当にありがとうございました。見事に希望していた通りの動きを実現できました。わかりやすく教えていただき、感謝しています。これを使って自分のページを充実させていこうと思います。

その他の回答 (1)

e_watt
ベストアンサー率71% (25/35)

2011/12/22 05:10 回答No.1

＞ソートするとポップアップの属性が消えてしまい、ソートするときに＞$('tbody').html(tag); で、文字列を代入してDOMツリーを作り直しているから、ポップアップの属性は改めて付け直す必要がありますね。私は実はjQueryを全然知らないので以下は最適解ではないかも知れませんが… ＞<script type="text/javascript"> ＞$(function(){ ＞// 全要素をからTITLE属性を持っている要素だけに絞るの部分を名前付きの関数にして、draw()の中で＞ $('tbody').html(tag); ＞ addTitleProp();　　　// ←命名した関数を毎度呼ぶという具合に呼び出してやれば、期待に沿った動作にはなったようです。

質問者

お礼 2011/12/22 17:47

e wattさんご回答有難う御座います。いろいろと試して見ましたが、素人のため、うまくいきません。 draw()を使ってもう一度記述するのだろうということはわかるのですが、関数をすべて書き直す方法が、よくわかりません。たとえば＞＞<script type="text/javascript"> ＞＞$(function(){ ＞＞// 全要素をからTITLE属性を持っている要素だけに絞る＞の部分を名前付きの関数にして、draw()の中でについて、名前付きの関数にする方法がよくわかりません。 $(function(){ を　$(function TitleProp(){ とすればよいのでしょうか。また、＞ $('tbody').html(tag); ＞ addTitleProp();　　　// ←命名した関数を毎度呼ぶこのTitleProp が関数名と考えて良いのでしょうか。このように考えて、いろいろなところに記述して見ましたが、うまく動作しません。関数名の記述およびadd関数の記述場所についてアドバイスをお願いします。

関連するQ&A

JavaScriptの記述を教えて下さい。
はじめまして、charliehamaといいます。素人なもので、JavaScriptに詳しい方、教えて下さい。次のコード（全体の中の一部）があります。  変数$urlについて、if構文で分岐させるにはどのように記述すればよいですか？ (1)　$urlがxxxの時、<td><span class="abc">'+$content+'</span></td> とする。 (2)　$urlがそれ以外の時、<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>とする。 (3)　(1)と(2)以外の処理は変更しない。質問の仕方が悪ければご指摘下さい。困っています。どうかよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
jQuery、tdマウスオーバー、行の先頭th操作
jQueryについて質問です。 <!DOCTYPE html><html><head> <style type="text/css"> th.e {background-color:orange;} </style> </head><body> <table border='1' cellspacing='0'> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $("table td").mouseover(function(){ $(this).parent().find("th").toggleClass("e"); }).mouseout(function(){ $(this).parent().find("th").toggleClass("e"); }); </script> </body></html> 上記で動いて嬉しかったのですが、もやもやしています。 this → parent → find が遠回りでスカッとしません。スカッとする方法はありますか？
- 締切済み
- JavaScript
JavaScriptでの時間割り作成について
<form> <br> <table border="3" bordercolor="#994C00" align="center" bgcolor="#FFDFAA"> <tr align="center"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr align="center"><td width="20" height="80">1</td><td width="70"><span id="sbj1"></span></td> <td width="60"><span id="crm1"></span></td><td width="100"><span id="com1"></span></td> <tr align="center"><td width="20" height="80">2</td><td width="70"><span id="sbj2"></span></td> <td width="60"><span id="crm2"></span></td><td width="100"><span id="com2"></span></td> <tr align="center"><td width="20" height="80">3</td><td width="70"><span id="sbj3"></span></td> <td width="60"><span id="crm3"></span></td><td width="100"><span id="com3"></span></td> <tr align="center"><td width="20" height="80">4</td><td width="70"><span id="sbj4"></span></td> <td width="60"><span id="crm4"></span></td><td width="100"><span id="com4"></span></td> <tr align="center"><td width="20" height="80">5</td><td width="70"><span id="sbj5"></span></td> <td width="60"><span id="crm5"></span></td><td width="100"><span id="com5"></span></td> <span id="testarea"></span> </form> </body> <script>  </script> というコードですこれは月曜日のシートで火曜日、水曜日・・・と土曜日までありますこのコードで月曜日の時間割を変更すると火曜日、水曜日などすべてのシートが変更されてしまいますシートごとに保存する方法ってありますか？ JavaScriptを始めたばかりなのでわかりやすく教えてほしいです＞＜
- ベストアンサー
- JavaScript
ソート　フォーム
以前こちらで質問させていただいたものです。ソートのできるリストについて質問し、大変ためになる回答をい忠美案した。今回、それを少々変更する必要があります。ソートすべきリストの中にフォーム要素のチェックボックスを入れたいのですが、ソートするとチェックが消えてしまいます。下記のようなコードですが、どのように修正すればよいでしょうか？どうかよろしくお願いいたします！ <html> <head><style>span{border:1px solid;margin:4px}</style></head> <body> <ol> <li> <span><a href="#" onClick="narabi(this,0)">社名</a></span> <span><a href="#" onClick="narabi(this,1)">仕入値</a></span> <span><a href="#" onClick="narabi(this,2)">小売値</a></span> <span><a href="#" onClick="narabi(this,3)">会社ID</a></span> <span>備考（ソート不要）</span> </li> </ol> <ul> <li><span>ABC</span><span ><input type="checkbox"></span><span >200</span><span >1</span><span >テキスト（ソート不要）</span></li> <li><span>BBB</span><span ><input type="checkbox"></span><span >300</span><span >2</span><span >テキスト（ソート不要）</span></li> <li><span>XYZ</span><span ><input type="checkbox"></span><span >300</span><span >3</span><span ></span></li> <li><span>A-AA</span><span ><input type="checkbox"></span><span >120</span><span >4</span><span >テキスト（ソート不要）</span></li> <li><span>A-17</span><span ><input type="checkbox"></span><span >200</span><span >5</span><span >テキスト（ソート不要）</span></li> </ul> </body> <script> var af=[]; function narabi(ob,cidx){ af[cidx]=af[cidx]?0:1; var dt=[]; var tg=parentSearch(ob,'OL').nextSibling; var li=tg.getElementsByTagName('li'); for(var i=0,m=li.length;i<m;i++){ var sp = li[i].getElementsByTagName('span'); dt[i]=sp[cidx].innerHTML+'|'; for(var j=0;j<4;j++) dt[i]+=sp[j].innerHTML+'|'; } dt.sort();if(af[cidx]) dt.reverse(); for(var i=0,m=dt.length;i<m;i++){ var sp = dt[i].split('|'); for(var j=0;j<4;j++) li[i].getElementsByTagName('span')[j].innerHTML=sp[j+1]; } } function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;} </script> </html>
- ベストアンサー
- JavaScript
ownerDocumentの使い方を知りたいです。
javascriptの.ownerDocumentの使い方を知りたいです。 https://developer.mozilla.org/ja/DOM/element.ownerDocument のサイトを参考に実際にいろいろ試してみました。ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test1() { var a = 123; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test1()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test2() { var a = this.ownerDocument; document.write(a); } </script> <div> <span onclick="test2()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test3() { var a = this; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test3()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー全てundefinedとなり、そのまま固まってしまいます。 .ownerDocumentはどのように使うのでしょうか。アドバイスをよろしくお願いします。
- ベストアンサー
- JavaScript
簡潔なJavaScriptで実現したい
次のような、btnToggleというクラス名のdivタグがいくつかあるHTMLで、それぞれクリックするとそれぞれの「開く／閉じる」が反転するという動きをさせたいです。 <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>AAA</div> </div> <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>BBB</div> </div> <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>CCC</div> </div> 　　　： <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>XXX</div> </div> 下記のようなJavaScriptで実行してみたのですが、いくつかのdivタグをそれぞれクリックすると、flgの値と現在の状態が入れ替わってしまいます。クラス名が同じで、flgも一つの変数なので当たり前なのですが… <script type="text/javascript"> $(document).ready(function(){ var flg = "close"; $(".btnToggle").click(function(){ if(flg == "close"){ $(this).html("<span>－</span>閉じる"); flg = "open"; }else{ $(this).html("<span>＋</span>開く"); flg = "close"; } }); }); </script> 私が考えられることは、classではなく、idで「btnToggle1」「btnToggle2」「btnToggle3」…などと定義し、 JavaScriptのプログラムを次のように書くしか思いつかないのですが、これでは、我ながら間抜けなプログラムだなと思いました。 <script type="text/javascript"> $(document).ready(function(){ var flg1 = "close"; $(".btnToggle1").click(function(){ if(flg1 == "close"){ $(this).html("<span>－</span>閉じる"); flg1 = "open"; }else{ $(this).html("<span>＋</span>開く"); flg1 = "close"; } }); var flg2 = "close"; $(".btnToggle2").click(function(){ if(flg2 == "close"){ $(this).html("<span>－</span>閉じる"); flg2 = "open"; }else{ $(this).html("<span>＋</span>開く"); flg2 = "close"; } }); var flg3 = "close"; $(".btnToggle3").click(function(){ if(flg3 == "close"){ $(this).html("<span>－</span>閉じる"); flg3 = "open"; }else{ $(this).html("<span>＋</span>開く"); flg3 = "close"; } }); 　　　　　　　：　　　　　　　： }); </script> 配列などを使えばもっと簡潔になるのでしょうか。どうか教えてくださいますようお願い申し上げます。
- ベストアンサー
- JavaScript
jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています）やりたいことは以下の２つです。・Div要素には元画像の大きさで表示させたい。・できれば、フェードイン・アウトで画像を切り替えたい。色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
連想配列から<th>を含むテーブルを作成する関数
連想配列からテーブル(<th>テーブルヘッダ項目を含む）を作成する関数を作ろうと思っています。配列と関数をどのように書けばHTMLのソースのようになるでしょうか？値によって、<td>と<th>を振り分けるようになど良い方法を教えてください。（1.できれば配列で<td>　</td>は省略したいと思います。）（2.<th>　</th>の指定場所は下のhtmlのように縦とか横とかにに変えられた方が良いです。） //-----　関数　----- function table($v) { } //-----　配列　----- $s = array(); $s[0] = array( 'A-1' , 'B-1' , 'C-1' , 'D-1' , 'E-1' ); $s[1] = array( 'A-2' , 'B-2' , 'C-2' , 'D-2' , 'E-2' ); $s[2] = array( 'A-3' , 'B-3' , 'C-3' , 'D-3' , 'E-3' ); $s[3] = array( 'A-4' , 'B-4' , 'C-4' , 'D-4' , 'E-4' ); $s[4] = array( 'A-5' , 'B-5' , 'C-5' , 'D-5' , 'E-5' ); table($s); //-----　生成されるhtml　----- <table> <tr><th>A-1</th><th>B-1</th><th>C-1</th><th>D-1</th><th>E-1</th></tr> <tr><td>A-2</td><td>B-2</td><td>C-2</td><td>D-2</td><td>E-2</td></tr> <tr><td>A-3</td><td>B-3</td><td>C-3</td><td>D-3</td><td>E-3</td></tr> <tr><td>A-4</td><td>B-4</td><td>C-4</td><td>D-4</td><td>E-4</td></tr> <tr><td>A-5</td><td>B-5</td><td>C-5</td><td>D-5</td><td>E-5</td></tr> </table> <table> <tr><th>A-1</th><td>B-1</td><td>C-1</td><td>D-1</td><td>E-1</td></tr> <tr><th>A-2</th><td>B-2</td><td>C-2</td><td>D-2</td><td>E-2</td></tr> <tr><th>A-3</th><td>B-3</td><td>C-3</td><td>D-3</td><td>E-3</td></tr> <tr><th>A-4</th><td>B-4</td><td>C-4</td><td>D-4</td><td>E-4</td></tr> <tr><th>A-5</th><td>B-5</td><td>C-5</td><td>D-5</td><td>E-5</td></tr> </table> //-----　考え中？？の配列　----- $s = array(); $s[0] = array( '<th>A-1</th>' , '<th>B-1</th>' , '<th>C-1</th>' , '<th>D-1</th>' , '<th>E-1</th>' ); $s[1] = array( 'A-2' , 'B-2' , 'C-2' , 'D-2' , 'E-2' ); $s[2] = array( 'A-3' , 'B-3' , 'C-3' , 'D-3' , 'E-3' ); $s[3] = array( 'A-4' , 'B-4' , 'C-4' , 'D-4' , 'E-4' ); $s[4] = array( 'A-5' , 'B-5' , 'C-5' , 'D-5' , 'E-5' ); table($s); $s = array(); $s[0] = array( 'th' => 'A-1' , 'B-1' , 'C-1' , 'D-1' , 'E-1' ); $s[1] = array( 'th' => 'A-2' , 'B-2' , 'C-2' , 'D-2' , 'E-2' ); $s[2] = array( 'th' => 'A-3' , 'B-3' , 'C-3' , 'D-3' , 'E-3' ); $s[3] = array( 'th' => 'A-4' , 'B-4' , 'C-4' , 'D-4' , 'E-4' ); $s[4] = array( 'th' => 'A-5' , 'B-5' , 'C-5' , 'D-5' , 'E-5' ); table($s); //-----　参考中のソース　----- //--　http://okwave.jp/qa/q8107250.html function table($v) { echo '<table>'; foreach ($v as $t1) { echo '<tr>'; foreach ($t1 as $t2) { echo '<td>' . $t2 . '</td>'; } echo '</tr>'; } echo '</table>'; }
- ベストアンサー
- PHP
jqueryで表に連番No.を追加したい
こんにちは。詳しい方教えてください。先程タイトル通りtableに自動連番を追加したく、下記のページを参考にしました。 http://www.webopixel.net/javascript/328.html しかし私の知識が乏しくうまくいきません。何を追加すればうまく連番になりますでしょうか。 ==================================================================== <script type="text/javascript"> $(function() { $('.sample tr').each(function(i) { if(i != 0) { $(this).prepend('<td>'+ i +'</td>'); } else { $(this).prepend('<th>No.</th>'); } }); }); </script> ==================================================================== <table class="sample"> <tr> <th rowspan="2">hoge</th> <th rowspan="2">hoge</th> <th colspan="4">hoge</th> </tr> <tr> <th>a</th> <th>b</th> <th>c</th> <th>d</th> </tr> <tr> ※ここに1からの連番を入れたいのです。 <td>hoge</td> <td>hoge</td> <td>hoge</td> <td>hoge</td> <td>hoge</td> <td>hoge</td> </tr> <tr> ※連番２ <td>hoge</td> <td>hoge</td> <td>hoge</td> <td>hoge</td> <td>hoge</td> <td>hoge</td> </tr> ・・・ ==================================================================== 説明が下手でわかりにくくすみません・・・・。是非詳しい方ご教示ください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
Yahoo! UI LibraryのDataTable変換で指定したイベント属性が消える
Yahoo! UI LibraryのDataTableを使ってウェブページを実装しています。 HTMLのtableタグ内のあるtd要素に onclick属性を指定してJavaScriptで仕掛けを組んでいますが Yahoo! UIのDataTableに変換すると、このイベント属性が無効になってしまいます。テーブルの変換が行われるタイミングで独自に指定した属性はなかったことになってしまうのでしょうか。最終的にやりたいことは、テーブルの行をクリックしたらそこに設定されているデータをpostして次画面に遷移する、ということなんですが実際のページはApache Wicketを使って実装しているので、 Wicket側で実装したonclickメソッド内でデータを取得したいと思っています。 Yahoo! UIから提供されているDOM操作メソッドを使ってクリックイベントを拾えば、何とかやりたいことができそうな気がするのですがそれ以外に何か方法があれば伝授してもらえないでしょうか。以下にサンプルソースを載せます。よろしくお願いします。 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/datatable/assets/skins/sam/datatable.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/json/json-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/get/get-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datatable/datatable-min.js"></script> </head> <body class="yui-skin-sam"> <div id="myMarkedUpContainer"> <table id="myTable"> <thead> <tr> <th>AAA</th> <th>BBB</th> <th>CCC</th> </tr> </thead> <tbody> <tr> <td onclick="window.alert();">1</td>　　←★このonclickが消えてしまう <td>bbb</td> <td>ccc</td> </tr> <tr> <td>2</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>3</td> <td>bbb</td> <td>ccc</td> </tr> </tbody> </table> </div> <script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() { var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myTable")); myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE; myDataSource.responseSchema = { fields: [{ key: "AAA", parser: "number" }, { key: "BBB" }, { key: "CCC" }] }; var myColumnDefs = [{ key: "AAA" }, { key: "BBB" }, { key: "CCC" }]; var myDataTable = new YAHOO.widget.DataTable("myMarkedUpContainer", myColumnDefs, myDataSource); }); }); </script> </body> </html> --------------------------------------------------
- ベストアンサー
- JavaScript