fujillin の回答履歴

CSVの会員名簿を読み込み、表にしてWEBに表示する為にjquery.csv2table.jsを使った こちらのサイトを参考にさせて頂きました。 http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm CSVを読み込み、表示は成功したのですが。 もともとのCSVデータが横長に項目が多い為 表示されるテーブルは横長の表となってしまいます。 出来れば一行をセルの結合で2段にまとめて表示したいと思っています。 <td colspan="2"><td rowspan="2">を使って [1]はココに表示[2]はココに表示するみたいにテンプレ化して表示できればと思っていますが セルの背景色は変更できてもセルの場所を任意に変更できません やはりそういった事は難しいのでしょうか どなたか詳しい方、教えて頂けますと幸いです。 よろしく願い致します。

■やりたいこと ・下記処理を一度に行いたい ・各ボタン毎にクリック判別するのではなく、まとめて出来ないでしょうか？ ・ボタンクリックした際id名がhoge以下を取得 ・jQueryでloadする際、puyoに取得した内容を足したい ■現状HTML <input type="button" id="hoge1" value=""> <input type="button" id="hoge2" value=""> <input type="button" id="hoge3" value=""> ■現状JS $("#hoge1").click(function(){ 　$('#piyo').load('puyo1.html'); }); $("#hoge2").click(function(){ 　$('#piyo').load('puyo2.html'); }); $("#hoge3").click(function(){ 　$('#piyo').load('puyo3.html'); });

一度質問させていただいたのですが締め切ってしまったため再度質問させていただきます。 やりたいことはjavascript内でtableの背景色を取得することです。 PHPの処理でtableの背景色を変更しているのですが 変更した後にjavascriptで指定の色だった場合、処理をするといったことがしたいので 変更後のtableの背景色を取得したいのです。 かなり悩んでいて詰まっている状況です。 どのような解決策があるかご教授お願いします。

こんにちは。 http://www.geekpage.jp/web/google-maps-api/v3/geocoder-0.php Google Maps APIを勉強しようとして、上記に書かれたプログラムをテキスト保存して、ローカルで実行しました。 そうすると、IEではzero_resultsとメッセージが表示され表示がされません。これは、どこがおかしいのでしょうか？ よろしくお願いいたします。

アコーディオンメニューで困っています。 色々と調べているのですが、どうもうまく動きません。 ■やりたい事 アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。 ■現状 ・アンカーリンク(A.html)-------------------- <a href="B.html#アンカー名">リンク</a> ・アコーディオン設置先(B.html)------------------ <div class="aaa" id="アンカー名"> <p class="title"> アコーディオンタイトル </p> <p class="bbb"> アコーディオンの内容表示 </p> </div> ・js--------------------------------------- $(document).ready(function(){ $(".bbb").hide(); $(".title").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $(location.hash).next(".bbb").slideToggle("slow"); }); }); 現状はこのような状態なのですが、アンカーでの動作をしてくれません。 分かる方いらっしゃいましたら、是非教えてください

社内Webサイトを作成しています。 メインページから、該当リンクをクリックすると詳細内容を説明している 別ウインドウを開くように設定しています（window.open）。 その別ウインドウ内には、iframeで他ページを表示させています。 別ウインドウのスクロールバーは非表示にしており、 iframeのスクロールバーのみが表示されています。 別ウインドウのサイズをユーザが変更した場合、今の設定では 別ウインドウのみがリサイズされて、中にあるiframeのサイズは変わりません。 リサイズされた場合、中のインラインフレームも 同じようにサイズ変更させたいのですが、このような事は可能なのでしょうか？ 別ウインドウのサイズは950×600と950×450の2パターンあります。 インラインフレームの表示サイズは950×550と950×400です。 (下にcloseボタンを置いているのでその分小さくしています) margin.paddingともに0で設定しています。 環境はIE8です。 このような事ができるのか、できるのであればどのような方法があるのか ご教示頂けないでしょうか。

社内Webサイトを作成しています。 メインページから、該当リンクをクリックすると詳細内容を説明している 別ウインドウを開くように設定しています（window.open）。 その別ウインドウ内には、iframeで他ページを表示させています。 別ウインドウのスクロールバーは非表示にしており、 iframeのスクロールバーのみが表示されています。 別ウインドウのサイズをユーザが変更した場合、今の設定では 別ウインドウのみがリサイズされて、中にあるiframeのサイズは変わりません。 リサイズされた場合、中のインラインフレームも 同じようにサイズ変更させたいのですが、このような事は可能なのでしょうか？ 別ウインドウのサイズは950×600と950×450の2パターンあります。 インラインフレームの表示サイズは950×550と950×400です。 (下にcloseボタンを置いているのでその分小さくしています) margin.paddingともに0で設定しています。 環境はIE8です。 このような事ができるのか、できるのであればどのような方法があるのか ご教示頂けないでしょうか。

社内Webサイトを作成しています。 メインページから、該当リンクをクリックすると詳細内容を説明している 別ウインドウを開くように設定しています（window.open）。 その別ウインドウ内には、iframeで他ページを表示させています。 別ウインドウのスクロールバーは非表示にしており、 iframeのスクロールバーのみが表示されています。 別ウインドウのサイズをユーザが変更した場合、今の設定では 別ウインドウのみがリサイズされて、中にあるiframeのサイズは変わりません。 リサイズされた場合、中のインラインフレームも 同じようにサイズ変更させたいのですが、このような事は可能なのでしょうか？ 別ウインドウのサイズは950×600と950×450の2パターンあります。 インラインフレームの表示サイズは950×550と950×400です。 (下にcloseボタンを置いているのでその分小さくしています) margin.paddingともに0で設定しています。 環境はIE8です。 このような事ができるのか、できるのであればどのような方法があるのか ご教示頂けないでしょうか。

自己解決できず、こちらで質問させてください。 どうぞよろしくお願いします。 社内サイトを作っています。 ブラウザ環境はIE8です。 toggleで項目ごとに展開・折りたたみの設定をしているページがあります。 初期値はdisplay:none;を指定しています。 ページ内に設定しているリンク（折りたたみ箇所ではない）をクリックした際 別ウインドウを開くようにしているのですが その別ウインドウには、toggle設定がされているページ(a.html)を iframe内に表示させたいのです。 別ウインドウを開いた時に、a.htmlの折りたたまれている個所を全て展開して表示させる事は できますでしょうか？ ご存知の方、アドバイス頂けないでしょうか。 ＜iframeに入れるページ(a.html)＞ <script> $(function(){ $("#list li div:nth-child(1)").addClass("title"); $("#list li div:nth-child(2)").addClass("content"); $(".h4").click(function(){ $(this).next().toggle(300); }); }); </script> <ul id="list"> <li> <h4 id="title">タイトル1</h4> <div id ="content" style="display:none;"> <p> あああああああああああああああああああああああ </p> </div> </li> ・ ・ ・ ・ </ul>

勉強の為カルーセルを自作しております。 そこで知識のある方に、是非ともお教え頂きたいことがございまして ご質問させていただきます。 現状私が書いたhtml、css、jsは下記となります。 ▼CSS <style type="text/css"> #Wrap{width:360px; margin:30px auto;} #Carousel{ width:360px; height:380px; padding-top:50px; padding-bottom:40px; float:left; position:relative; } #Carousel .Carousel-inner{ height:370px; overflow:hidden; } #Carousel .Carousel-inner ul li{ height:180px; margin-bottom:10px; display:block; } #btn_up,#btn_down{ position:absolute; left:165px } #btn_up{top:10px;} #btn_down{bottom:10px;} ▼html <div id="Wrap" class="clearfix"> <div id="Carousel"> <div class="Carousel-inner"> <div class="CarouselMove"> <ul> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFE599&text=img1"></a></li> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/99F8FF&text=img2"></a></li> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img3"></a></li> <li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img4"></a></li> </ul> </div> </div> <a href="#" id="btn_up"><img src="img/up.gif" alt="" width="30" height="30" /></a> <a href="#" id="btn_down"><img src="img/down.gif" alt="" width="30" height="30" /></a> </div> </div> ▼JS $(function(){ var target = $('#Carousel'); var targetList = target.find('li'); var targetLength = targetList.length; var showLength = 2;//見えている枚数 var moveLength = 2;//動かす枚数 var itemHeight = targetList.outerHeight(true);//画像一枚の高さ var moveDistance = itemHeight * moveLength;//一度に動かす量 var moveSpeed = 400; var easing = 'swing'; var clickFlg = 0; $('#btn_down').click(function(e){ e.preventDefault(); if(!clickFlg){ clickFlg = 1; var clone = target.find('li').slice(0,moveLength).clone(true); clone.appendTo(target.find('li').parent().filter(':last')); target.find('li:first').stop() .animate({marginTop : '-=' + moveDistance}, moveSpeed , easing , function(){ target.find('li').slice(0,moveLength).remove(); clickFlg = 0; }); }else return; }); }); 上記を実行すると問題なく動きます。 ただ、btn_upについてはどのように記述すれば良いかがわからず 教えて頂きたいと思っております。 この考えでダメであれば、代替案をご教示願えれば幸いです。 仕様としましては、今後プラグインにする予定でして、 var showLength = 2;//見えている枚数 var moveLength = 2;//動かす枚数 上記の2点は変更できるようにしたいと思っております。 また、1点現状でも何故こうなるかわからない点がございまして、 var clone = target.find('li').slice(0,moveLength).clone(true); このtarget.find('li')を変数に格納しているtargetListにすると 動作しなくなってしまいます。何故なのかわからず。。 こちらと併せてご教示いただけませんでしょうか。 お忙しいところ大変恐縮ですが 宜しくお願い致します。

下記コードはサンプルとして３つしか置いてませんが、実際は何十個と置く予定です このため、連番をふって１ページ内で複数個置いてもそれぞれが動くようにしたいのですが、 Toggleのところの記述が悪いのかうまく動きません。 初心者ですいませんが、ご教授ください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>

下記コードはサンプルとして３つしか置いてませんが、実際は何十個と置く予定です このため、連番をふって１ページ内で複数個置いてもそれぞれが動くようにしたいのですが、 Toggleのところの記述が悪いのかうまく動きません。 初心者ですいませんが、ご教授ください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>

wordpressでサイト作っています idの番号を変えることで１ページ内に#numの連番で複数タブを置ける様にはしたのですが、 while文のなかで番号に連番を振るやり方がわかりません。 初心者ですいませんが、よろしくお願いします <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ … <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html>

A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。 アラートは表示されるのですが、入力欄に何を打っても、　namae と出てしまいます。変数に何も入ってないようです。 これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか？ 〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>

タイトルの通り、現在IE8環境で、ショートカットキーを無効にする方法を模索しています。 ネットで調べた結果、イベントを受け取ることまでは成功するのですが、 それを無効化することができません（一部のショートカットキー）。 現在試しているのが Ctrl++→拡大 Ctrl+－→縮小 の二つです。 htmlのバージョンは4.01 Strictを使用しています。 以下ソース window.document.attachEvent('onkeydown', onKeyEvent); window.document.attachEvent('onkeyup', onKeyEvent); function onKeyEvent(e){ if(!e) e = window.event; //確認用 //console.log("Key Code : " + e.keyCode); //console.log("Event Type : " + e.type); //console.log("Ctrl Key : " + e.ctrlKey); if(e.keyCode != 17){ if(e.ctrlKey){ switch(e.keyCode){ case 187: case 189: //e.keyCode = 0; e.returnValue = false; e.cancelBubble = true; //window.event = e; return false; } } } return true; } alert()をいれると無効化できるといった記述も見たのですが、 今回はその方法は使わずに実装する予定です。 どなたか方法をご存知でしたら、ご教授ください。 （コメントアウトしているものも試しましたが、うまくいきませんでした）

表示しているhtmlファイル名を取得して、動的に参照フォルダを変えるスクリプトを組んでいますが思うように動かず四苦八苦しております。 -------------------------------- /* --- URLからファイル名を取得しfileNameに格納、 　　　　　　　　　　見学報告データフォルダ名指定用として動的に変化させる --- */ var levelUrl = location.href.split("/"); var fileName = levelUrl[levelUrl.length-1].split("."); // 表示用data.js読込 document.open(); document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>'); // ページ生成シーケンス document.write ('<h2>',commentList[0][0],'</h2>');　　　//アルバムタイトル生成 document.write ('<div>',commentList[0][1],'</div>'); 　　//冒頭コメント生成 for (var i = 1 ; i <= commentList[1][0] ; i++){ document.write ('<p class="album"><img src="./topics/',fileName[0],'/',i,'.png" /></p><p class="comment">',commentList[1][i],'</p>'); } document.write ('<div><p class="thanks">ご来訪のお礼</p>',commentList[0][2],'</div>'); //締めのコメント生成 document.close(); ----------------------- この内容を外部ファイル(album.js)として保存し[例]20140623_2htmlページ内で読み込みデバッグツールで確認するとalbum.jsを読み込んだ後に./topics/2014062_2/data.jsも読み込み、中身も正常に確認できましたが、album.jsの後に読み込まれているためか変数を利用できず？真っ白なページとなりました。 そこで、冒頭からコメントの「ページ生成シーケンス」前までを20140623.htmlのalbum.js読み込み直前に直接記載したところ、何故か document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>'); の行がhtmlタグの書き出しとして機能せず、最後のシングルクォーテーション以降がページ内にテキストとして表示されました。 具体的な表示としてはページ内に '); document.close(); が表示され、一つのwrite文として機能していないためdata.jsファイルの読込も出来ない状態になりました。 外部ファイルにするか直書きにするかで動作が変わるため何が原因か分からず困っています。 なお、当方が目的としているのは見学報告のページに表示するコメントを収めた配列をhtmlファイルのファイル名に応じて動的に変化させたい事ですので、私が書いたフォルダ名を動的に変化させる方法のミス部分の指摘でも、変数名を動的に変化させる方法（元々これを実現しようと思っていましたが能力不足で出来ませんでしたorz）具体的には20140623.htmlのファイル内では配列data20140623の中身を参照するといった方法でも構いません。 よろしくお願い致します。

表示しているhtmlファイル名を取得して、動的に参照フォルダを変えるスクリプトを組んでいますが思うように動かず四苦八苦しております。 -------------------------------- /* --- URLからファイル名を取得しfileNameに格納、 　　　　　　　　　　見学報告データフォルダ名指定用として動的に変化させる --- */ var levelUrl = location.href.split("/"); var fileName = levelUrl[levelUrl.length-1].split("."); // 表示用data.js読込 document.open(); document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>'); // ページ生成シーケンス document.write ('<h2>',commentList[0][0],'</h2>');　　　//アルバムタイトル生成 document.write ('<div>',commentList[0][1],'</div>'); 　　//冒頭コメント生成 for (var i = 1 ; i <= commentList[1][0] ; i++){ document.write ('<p class="album"><img src="./topics/',fileName[0],'/',i,'.png" /></p><p class="comment">',commentList[1][i],'</p>'); } document.write ('<div><p class="thanks">ご来訪のお礼</p>',commentList[0][2],'</div>'); //締めのコメント生成 document.close(); ----------------------- この内容を外部ファイル(album.js)として保存し[例]20140623_2htmlページ内で読み込みデバッグツールで確認するとalbum.jsを読み込んだ後に./topics/2014062_2/data.jsも読み込み、中身も正常に確認できましたが、album.jsの後に読み込まれているためか変数を利用できず？真っ白なページとなりました。 そこで、冒頭からコメントの「ページ生成シーケンス」前までを20140623.htmlのalbum.js読み込み直前に直接記載したところ、何故か document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>'); の行がhtmlタグの書き出しとして機能せず、最後のシングルクォーテーション以降がページ内にテキストとして表示されました。 具体的な表示としてはページ内に '); document.close(); が表示され、一つのwrite文として機能していないためdata.jsファイルの読込も出来ない状態になりました。 外部ファイルにするか直書きにするかで動作が変わるため何が原因か分からず困っています。 なお、当方が目的としているのは見学報告のページに表示するコメントを収めた配列をhtmlファイルのファイル名に応じて動的に変化させたい事ですので、私が書いたフォルダ名を動的に変化させる方法のミス部分の指摘でも、変数名を動的に変化させる方法（元々これを実現しようと思っていましたが能力不足で出来ませんでしたorz）具体的には20140623.htmlのファイル内では配列data20140623の中身を参照するといった方法でも構いません。 よろしくお願い致します。

現在、入力エリアの文字色が灰色に統一されており、 入力時（フォーカスがくれば）があれば、文字色を黒色に変更しております。 文字色を制御しているコードは下記です。 ▼文字色制御ーーーーーーーーーーー $(function() { $(":input").focus(function () { var id=$(this).attr("id"); $('#'+id).css("color","#000000"); $('#'+id).blur(function(){ if($('#'+id).val() == ""){ $('#'+id).css("color","silver"); } }); }); }); ▲文字色制御ーーーーーーーーーーーーーーーーーーー 既存で記載されている部分に関しましては、問題なく、文字色が変更されるのですが、 JSで入力エリアが追加できるような作りになっているため、 追加された入力エリアでの文字色が変更されません。 id名の取得もできておりませんでした。 どのように記述するとjsで追加したエリアへの文字色変更が 実装できますでしょうか。 ▼入力エリア追加ーーーーーーーーーーー $(function(){ $(".addInspector").click(function(){ var num = parseInt($("#dlTableNum").val(),10) + 1; var html = $("#addArea").html(); $(".addInspectorBox").append(html.replace(/0_/g, num)); form(); $(".minusInspector").click(function(){ $(this).parents(".dlTable").prev().remove(); $(this).parents(".dlTable").remove(); }); $("#dlTableNum").val(num); }); }); ▲入力エリア追加ーーーーーーーーーーーーーーーーーーー よろしくお願い致します。

現在、入力エリアの文字色が灰色に統一されており、 入力時（フォーカスがくれば）があれば、文字色を黒色に変更しております。 文字色を制御しているコードは下記です。 ▼文字色制御ーーーーーーーーーーー $(function() { $(":input").focus(function () { var id=$(this).attr("id"); $('#'+id).css("color","#000000"); $('#'+id).blur(function(){ if($('#'+id).val() == ""){ $('#'+id).css("color","silver"); } }); }); }); ▲文字色制御ーーーーーーーーーーーーーーーーーーー 既存で記載されている部分に関しましては、問題なく、文字色が変更されるのですが、 JSで入力エリアが追加できるような作りになっているため、 追加された入力エリアでの文字色が変更されません。 id名の取得もできておりませんでした。 どのように記述するとjsで追加したエリアへの文字色変更が 実装できますでしょうか。 ▼入力エリア追加ーーーーーーーーーーー $(function(){ $(".addInspector").click(function(){ var num = parseInt($("#dlTableNum").val(),10) + 1; var html = $("#addArea").html(); $(".addInspectorBox").append(html.replace(/0_/g, num)); form(); $(".minusInspector").click(function(){ $(this).parents(".dlTable").prev().remove(); $(this).parents(".dlTable").remove(); }); $("#dlTableNum").val(num); }); }); ▲入力エリア追加ーーーーーーーーーーーーーーーーーーー よろしくお願い致します。

以下のコードなのですが現在地を取得してリスト化して保存するというものです 追加された<a>の横に削除ボタン(del_btn)を設置し、押されたらリストを削除をいう風にしたいのですが どうしてもできません コードの下部の //削除ボタンが押されたとき の部分の正しい記述がわかりません ご教授お願いします <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> </head> <body bgcolor="#C2F2A5"> <center> <font face="HG創英角ポップ体"> <h1>ブックマークMAP</h1> </center> <div id="new_div"> <span id="name">場所：<input id="name_txt" type="text" value="" size="20" /><br /></span> </font> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタン、削除ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; $("del_btn").onclick = del_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\t"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"<input id='del_btn' type='button' value='削除'>"+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "\t" + lat + "\t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } //削除ボタンが押されたとき function del_btn_clickHandler(){ delete "<'a'>"; } </script> </body> </html>