- 締切済み
二次元オブジェクトと内部要素の参照、置換
DIV要素を以下のように生成していきます。 for(i=0;i<MaxW;i++){ for(j=0;j<MaxH;j++){ document.write('<div id="Waku_'+i+'_'+j+'">['+i+']['+j+']<\/div>') } } そして後々これらDIV要素の任意のIDの内部要素を参照したり置換したりできるようにしたいのです。 方法としては、 document.getElementById("Waku_"+i+"_"+j).innerHTML="置換したいもじ"; alert(document.getElementById("Waku_"+i+"_"+j)); などを考えていますが、getElementById()は変数が内部に使用されると、 或いは変数のみでの指定ができないのかうまく機能しません(JavaScriptの仕様でなのか、自分のミスなのか、何か他の盲点があるのかすらわからない)。 getElementByIdを使うにあたって、何か利用に際して必要な条件があったら教えていただけるとありがたいです。 たとえば、div要素ではそもそもgetElementByIdは使えないとか、 見落としがちな盲点があるかもしれないのでもしありましたらこれらも御願いします。 完成させたいものとしては、クリックしたDIV要素の内部要素を参照して、 <input type="text" value="内部要素"> として、書き換え後フォーカスを外すと、そのフォームで編集した文字列をソースに変換して適応する、 一種のエクセル機能のようなプログラムを作ろうと考えています。
- si_x_inf
- お礼率25% (2/8)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
みんなの回答
IEに限るなら <div id="xx" contenteditable="true"> abc </div> にして中身を編集できたりする。 それを拾い上げれば？
もう時間がないので、綺麗に書けない！もうしわけない！ <html> <head> <style> span {border:1px #888 solid; margin:1px; background-color:#efe; } </style> </head> <body> <div id="b"> <script> for(i=0;i<10;i++){ for(j=0;j<10;j++){ document.write('<span id="Waku_'+i+'_'+j+'">a['+i+']['+j+']</span>'); } document.write('<br>'); } function setval(){ e=event.srcElement; if(e.tagName=='SPAN') { ob=document.createElement('input'); ob.id="abc"; ob.value=e.innerHTML; ob.onblur=function(){ o2=event.srcElement; p=o2.value; o3=o2.parentNode; while(o3.hasChildNodes()) o3.removeChild(o3.lastChild) o3.innerHTML=p; } while(e.hasChildNodes()) e.removeChild(e.lastChild); e.appendChild(ob); } } </script> </div> <script> var e; document.getElementById('b').onclick=function(){ setval() }; </script> </body> </html> eventが発生したobjectのinnerHTMLを保存しておいて そのオブジェの子エレメントを削除し、<input>を作り 保存しておいた値を代入し、エレメントを追加する 深く考えていないので、フォーカスが外れたときの処理が、不完全！ idは唯一のものである必要がある nameとの共用には注意。またその順序も注意。 idがないと勝手にnameが使われたり・・
勘違い！書き換える処理も必要だったね。 <html> <head> <style> span {border:1px #888 solid; margin:1px; background-color:#efe; } </style> </head> <body> <input type="text" size="30" id="a" onFocusout="e.innerHTML=this.value"><hr> <div id="b"> <script> for(i=0;i<10;i++){ for(j=0;j<10;j++){ document.write('<span id="Waku_'+i+'_'+j+'">a['+i+']['+j+']</span>'); } document.write('<br>'); } function setval(){ e=event.srcElement; if(e.tagName=='SPAN') { document.getElementById('a').value=e.innerHTML; } } </script> </div> <script> var e; document.getElementById('b').onclick=function(){ setval() }; </script> </body> </html>
補足
>>getElementByIdを使うにあたって、何か利用に際して必要な条件があったら教えていただけるとありがたいです。 >>たとえば、div要素ではそもそもgetElementByIdは使えないとか、 >>見落としがちな盲点があるかもしれないのでもしありましたらこれらも御願いします。 回答ありがとうございます。フォームを新しく作っておくという方法も斬新だなと思いましたが、できればDIV要素のみで完結する、且つ共通のフォームを経由しない、個別のフォームそれぞれから変更できるような方法は存在しますか？ ('a'というフォームへソースを移動させて、編集が終わったら元のオブジェクトに戻すのではなく、クリックされた枠の名前の、たとえば'waku_2_3'というようなフォームをつくり(このときもdocument.getElementById(枠の名前).innerHTML="<input name='waku_form_2_3'...>"としたい)、そのフォームを編集し終えたらdocument.getElementByName("waku_form_(適切な行)_(適切な列)").valueなどで内部要素へ戻すような)
IEのみ！ <html> <head> <style> span {border:1px #888 solid; margin:1px; background-color:#efe; } </style> </head> <body> <input type="text" size="30" id="a"><hr> <div id="b"> <script> for(i=0;i<10;i++){ for(j=0;j<10;j++){ document.write('<span id="Waku_'+i+'_'+j+'">a['+i+']['+j+']</span>'); } document.write('<br>'); } function setval(){ e=event.srcElement; if(e.tagName=='SPAN') { document.getElementById('a').value=e.innerHTML; } } </script> </div> <script> document.getElementById('b').onclick=function(){ setval() }; </script> </body> </html> それと >alert(document.getElementById("Waku_"+i+"_"+j));は alert(document.getElementById("Waku_"+i+"_"+j).innerHTML); ならいいのでは？
お礼
質問が抽象的すぎるという問題点がありましたので、別の質問を立てたいとおもいます。 contenteditableを使うというこんな簡単な方法もあるのに、どうしてもエクセル機能ということで、列や行の操作も必要となってしまい、そのためには列や行などで変数を利用したオブジェクトのIDを操作する必要が出てきます。 たとえば、 yoko=prompt("ヨコの数字を入力してください"); tate=prompt("タテの数字を入力してください"); document.getElementById("Waku_"+yoko+"_"+tate).innerHTML="このます目";