- ベストアンサー
テキストをクリックしたらalertを表示する方法とは？
- テキストをクリックした際にalertを表示するための方法を検討する。
- チェックボックスをクリックした際にはalertを表示させない方法を探る。
- テキストの右側の緑のエリアをクリックしてもalertが表示されない方法を見つける。
- newtgecko
- お礼率88% (150/169)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
チェックボックスのonmouseove/onmouseoutでイベントを設定・解除するという手もありますよ。 function alertOn(inputTag){ inputTag.parentNode.onclick = alertHello } function alertOff(inputTag){ inputTag.parentNode.onclick = ""; } function alertHello(){ alert('hello world'); } </script> <style> .long_width{ width: 100%; background-color: lightgreen; } </style> </head> <body onload=""> <table border="1" class="long_width"> <tr> <td onclick="alertHello()"><input type="checkbox" onmouseover="alertOff(this)" onmouseout="alertOn(this)"></input>テキスト1</td> </tr> <tr> <td onclick="alertHello()"><input type="checkbox"></input>テキスト2</td> </tr> </table>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
</input>って、ひつよう？むしするのは、かまわないが。 <table border="1" class="long_width"> <tr> <td><input type="checkbox">少なくとも質問へのお礼はすべきだ。</td> <tr> <td><input type="checkbox">好きで回答者をしているのだから、スルーしても良い</td> </table> <script> /*@cc_on@*/ function handle (e) { var t = e./*@if(1) srcElement @else@*/ target /*@end@*/; var r, c; if (t.tagName === "TD") { r = t.parentNode.rowIndex + 1; c = t.cellIndex + 1; alert(['R',r,'C',c," のTDだよ！"].join ('')); alert(['中身は、', t./*@if(1) innerText @else@*/ textContent /*@end@*/].join('')); } } document./*@if(1)attachEvent('on' + @else@*/addEventListener (/*@end@*/ 'click', handle, false); </script>
お礼
ご回答ありがとうございます コードの意味が理解できなくて残念です。最近のWeb事情に最適（？）なコードになっているようなきがするのですが、私にはそれを理解する力がありませんでした。これからの参考にさせていただきます。
- fujillin
- ベストアンサー率61% (1594/2576)
全体の構成がわからないので適当ですが… （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .long_width{ width: 100%; background-color: lightgreen; } </style> <script type="text/javascript"> /*@cc_on@*/ document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'click', function(e){ var t = e./*@if(1) srcElement @else@*/ target /*@end@*/; if(t.nodeName != "TD") return; while(t && t.nodeName != "TABLE") t = t.parentNode; if(t && /(^| )long_width( |$)/.test(t.className)){ alert("TDだよ！"); } }, false); </script> </head> <body> <table border="1" class="long_width"> <tr> <td><input type="checkbox"></input>テキスト1</td> </tr> <tr> <td><input type="checkbox"></input>テキスト2</td> </tr> </table> </body> </html>
お礼
返事が遅くなりました。ご回答ありがとうございます。 ステートメントを初めて知りました。JavaScriptは適当にしか扱っていないので、全く知らなかったです。DOCTIPEからすべて作って頂いてありがとうございます。ただ、今の私のレベルではステートメントでどのように処理をifなどで分けているのかわかりません。これからの参考にさせていただきます。ありがとうございました。
- balloon23
- ベストアンサー率69% (16/23)
jsでの回答とは異なりますが1つ。 お試しされたspanで囲む方法、テキストのみになるのはspanがインライン要素だからではないでしょうか。spanにstyleでdisplay:block;でブロックにすると余白部分もカバーできると思います。 その場合段落ちしてinputと改行されてしまいますが。 無難にやるなら <tr> <td><input type="checkbox" /></td> <td onclick="alert('hello')">テキスト1</td> </tr> という感じでもう一列作ってみてはどうでしょうか？
お礼
返事が遅くなりました。ご回答ありがとうございます。 私もその方法を試しましたが、できればセルを増やさない方法がいいです。ごめんなさい。
お礼
ご回答ありがとうございます。 シンプルですが、この発想は思いつきませんでした。私にとってはすごくわかりやすいコードです。他の回答者さんはhtml部分にコードが増えないように工夫されている点でも良いと思うのですが、自分の理解のしやすさを優先して、ベストアンサーに決めました！ありがとうございました。