Greasemonkeyで<div>タグで既存の<pre>を囲む方法
- Greasemonkeyを使用して、<pre>タグの表示/非表示を切り替えるスクリプトを作成しています。
- 参照したサイトに従い、<div>タグで<pre>タグを囲む方法を試していますが、うまく行っていません。
- 現在のgreasemonkeyコードに問題があり、目的の動作が実現できていないようです。助けが必要です。
- ベストアンサー
div で既存の <pre> を囲む方
Greasemonkey で、<pre> 部分の表示/非表示を切り替えるスクリプトを作ろうとしています。後述のサイトを参照しまして、以下のような実現方法を試す事にしましたが、 div で既存の <pre> を囲む所でつまづいています。 TargetId で対象を探して、その child element である <pre> を <div id="disp"> で囲んで、ボタンクリックで表示/非表示を切り替える。 ・参照したサイト 複数のタグをDIVタグで囲みたい http://okwave.jp/qa/q7506227.html 表示/非表示の切り替え http://www.pori2.net/js/DOM/7.html 下記が実行対象のページの HTML 抜粋と、現在のコード内容です。 対象ページの一部 ============= <tr> <td id="TargetId" class="sorting_1"> <h6 class="Title"> </h6> <pre> 文章 </pre> </td> </tr> 現在の greasemonkey code ====================== var targetObj, wrap; targetObj = document.getElementById('TargetId'); wrap = $('<div />'); targetObj.append(wrap.append(targetObj.children('pre'))); firebug で debug してみたところ、変数 wrap にはオブジェクト div が入っており、 targetObj には目的の TargetId が入っています。 そのため、append の部分が動いていないと思っています。 宜しくお願いします。
- jussmen_1979
- お礼率85% (12/14)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
targetObj は目的の HTMLElement オブジェクトなのでしょうが、 jQuery のオブジェクトではないため、children メソッドが http://js.studio-kingdom.com/jquery/traversing/children ではなく https://developer.mozilla.org/ja/docs/Web/API/ParentNode.children とみなされています 誤: targetObj = document.getElementById('TargetId'); 正: targetObj = $(document.getElementById('TargetId')); 正: targetObj = $('#TargetId');
関連するQ&A
- mac＆winのsafari4.03にてtableタグのmarginの挙動がおかしい件
htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------
- ベストアンサー
- HTML
- ソースの簡略化、、、
「行追加をクリック」すると、テキスト入力覧が表示されるという仕組みのプログラムです。 詳細： htmlファイルに line_1から～line_20までタグをいっぱい書き、 最初はjavascriptを利用して「XXXX.style.display = 'none';」すべて見せない状態にしまし その状態で、「行追加をクリック」をクリックするとjavascript処理で１つずつ表示されるようにしました。 ここで質問ですが、 20個の同じコードを繰り返しいっぱい書く代わりにこれらをまとめて簡単にすることはできないでしょうか？ 例え、４０個の表示が必要となれば同じコードを40回も書かなきゃいけないので、、大変です。 <div id="line_1" class="mytext"> <tr> <td width=50> <input type="text" name="Line1"> </td> </tr> </div> <div id="line_２" class="mytext"> <tr> <td width=50> <input type="text" name="Line2"> </td> </tr> </div> <div id="line_3" class="mytext"> <tr> <td width=50> <input type="text" name="Line3"> </td> </tr> </div> <div id="line_4" class="mytext"> <tr> <td width=50> <input type="text" name="Line4"> </td> </tr> </div> ・ ・ ・ ・ <div id="line_20" class="mytext"> > <tr> <td width=50> <input type="text" name="Line20"> </td> </tr> </div> <p class="UP"><a href="#" id="upLine">行追加</a></p> ご教授よろしくお願いします。
- 締切済み
- JavaScript
- 親要素の除去(Jqueryのunwrapメソッド)
jquery のunwrapメソッドを使用して下記コードを作成しました。 「div#wrap1」の配下に 「div#wrap2」、「div#wrap3」「div#wrap4」3つのdiv要素がありその3つの要素 それぞれの配下にはテーブル(3つとも同じ名前のテーブル)が存在しています。 ボタンを押下すると「div#wrap1」、「div#wrap2」、「div#wrap3」「div#wrap4」 を全て除去し、テーブルも1つだけ残すコードを書きました。 しかし、ボタン押下後、IEの開発者ツールでHTMLを確認するとテーブルは１つだけ 残っているのですが「div#wrap1」配下に存在しています。 コード中ではテーブルが残り1つになったテーブルに対して$(this).unwrap()とやって いるのですがこれがうまくいっていないようです。 原因がわかられる方はいらっしゃいますでしょうか。 <html> <head> <meta charset="UTF-8" /> <script src="jquery-1.9.1.js"></script> <script> $(function () { $( "#add" ).click(function () { if($("table[name='tblList']").length > 1) { // tableの親要素「div#wrap2」、「div#wrap3」「div#wrap4」を除去 $("table[name='tblList']").unwrap(); $("table[name='tblList']").each(function(){ // 「name='tblList'」のテーブルを削除 $(this).remove(); //「name='tblList'」のテーブルが残り1つの場合 if($("table[name='tblList']").length == 1) { // tableの親要素「div#wrap1」を除去 $(this).unwrap(); return false; } }); } }); }); </script> </head> <body> <input type="button" id="add" value="行追加"> <div id="wrap1"> <div id="wrap2"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap3"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap4"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- tableがbodyにはみ出る。。
文章での質問で恐縮ですが、 html例に記載のような形で、レイアウトを作っています。 ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、 右ボックス（div right-box）内のテーブルの行が増えた際（運用上、可変で増えます）に、 tableがdiv構成（wrap-1,wrap-2,right-box,footer）からはみ出して、bodyの領域に出てしまいます。 スタイルシートでは左右のボックスをfloat left、float rightしていて、 テーブルの行が可変なので、left-box以外にはheightは指定していないです。 ※left-boxのheight指定は100% heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、 どうもうまくいかないです。 left-boxにheightを指定しているのは、left-box内に定義している要素があり、 heightの指定がない場合に、その要素の高さになってしまうので、 right-boxと同じ高さになるように、１00%を指定しています。 分かりにくい質問で申し訳ないですが、 right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか？ 本来、heightなしで可変になるのであれば、 可変にならない原因の推測をお願いします。 ---ここからhtml例--- <html> <head> </head> <body> <div id="wrap-1"> <div id="header">; </div> <div class="wrap-2"> <div id="left-box"> </div> <div id="right-box"> <table id="table"> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> </table> </div> </div> <div class="footer clear"> </body> </div> </div> </body> </html>
- ベストアンサー
- HTML
- JavaScriptで特定のtdタグにclass名をつけたい
指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？ 【HTML参考】 <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> 上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。 よろしくお願いいたします。
- 締切済み
- JavaScript
- JSPでdivタグに定義したスタイルシートが反映されない
いつもお世話になります。 JSP／サーブレットを使用した簡単なWebアプリを作っているのですが、スタイルシートが反映されず困っています。 具体的には、下記のコードがあったとします。 <div class="main-area"> あああ<br> <!--(1)--> <table> <tr> <td>いいい</td> <!--(2)--> </tr> </table> </div> この場合、divタグにスタイルシートを適用しているので、(1)、(2)ともに反映されると思っていたのですが、 結果は、(1)は反映されるのですが、(2)は反映されませんでした。tableタグに同様にclassの定義を行えば反映されますが、なぜ上記の 状態で反映されないのでしょうか。 開発環境は以下になります。 ・Java5.0 ・eclipse3.5.2 ・tomcat6.0 ※開発はeclipse上でtomcatを起動して行っています。 よろしくお願いします。
- 締切済み
- Java
- DIVタグでの擬似インラインフレーム
<DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS：WindowsXP SP１ ブラウザ：IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。
- ベストアンサー
- HTML
- <pre>で折り返させる方法を教えてください（firefox）
表示枠に収まらない改行が入っていない長い文字列を<pre>タグで表示させると、IEでは表示枠の横幅で折り返して表示してくれるのですが、firefoxだと折り返して表示してくれません。 firefoxでも正常に折り返して表示させる方法はないでしょうか？ cssには以下のように書いています。 pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; }
- ベストアンサー
- HTML
- tableに対するdiv
テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★１</td> <td align="center" width="20%">★２</td> <td align="center" width="20%">★３</td> <td align="center" width="20%">★４</td> <td align="center" width="20%">★５</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう？
- ベストアンサー
- HTML
- 複数のタグをDIVタグで囲みたい
<TD>タグの中に<IFRAME>タグと<INPUT>タグがあり、それを<DIV>タグで囲みたいのです。 <TD> <TD> <IFRAME id="xxx" ... ==> <DIV> <INPUT id="yyy" ... <IFRAME id="xxx" ... </TD> <INPUT id="yyy" ... </DIV> </TD> jQueryのwrapall関数かと思うのですが、サンプル等では同じ種類のタグを囲むものしか ありませんでした。 jQueryは経験がないので、四苦八苦しています。 どなたかお知恵をお貸しください。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
range.surroundContents() にて本投稿で質問させていただいた部分は実現する事が出来ました。 最終的な機能を実装するには至っていませんが、先に進む事ができましたので本質問は以上とさせて頂きます。 ご回答有り難うございました。
補足
ご連絡有り難うございます。 わたしが JQuery の事を分かっておらず、使用するつもりの無かった JQuery を 使用したコードを参照していた様です。 Greasemonkey では通常は JQuery は使用できないようなので、javascript の DOM で 実現する方法がありましたら、ご教示いただけないでしょうか。 その後、以下のサイトを参照して、surroundContens で実現できないか試しています。 https://developer.mozilla.org/en-US/docs/Web/API/range.surroundContents 現在のコード =========== var range = document.createRange(); var newNode = document.createElement('div'); range.selectNode(document.getElementById('TargetId').item(0)); range.surroundContents(newNode); 宜しくお願い致します。