- ベストアンサー
javascriptでボタンを押すたびにテキストエリアを追加
javascriptでボタンを押すたびにテキストエリアを追加しようとしています。 下記の内容を応用して 1 テキストエリア(1) 2 テキストエリア(2) 3 テキストエリア(3) 4 テキストエリア(4) ・ ・ ・ ボタンを押すたびに追加され15個まで増やすという風にしようとしているのですが、うまくいきません。テーブルの中に入るところまでは良くのですが、連番の数字を入れるのができません。 var tag_num=4; function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } 教えてください。宜しくお願いします。
- eccschool
- お礼率8% (53/644)
- JavaScript
- 回答数6
- ありがとう数3
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと微妙だけど、各行の共通部分が多いならcloneNodeする方が いいとおもいますよ。 で、こんな感じで・・・ <script> function myTextAreaAdd(obj){ var max=15; var objTRs=document.getElementById("table").getElementsByTagName("tr"); var tag_num=objTRs.length; var newTR=objTRs[0].cloneNode(true); var objTD=newTR.getElementsByTagName("td")[0]; while(n=objTD.lastChild) objTD.removeChild(n); var newTXT=document.createTextNode((++tag_num).toString()); objTD.appendChild(newTXT); var nTA=newTR.getElementsByTagName("textarea")[0]; nTA.setAttribute("name","howto"+newTXT); objTRs[0].parentNode.appendChild(newTR); if(tag_num>=max) obj.disabled=true; } </script> <table id="table" summary=""> <tr><td>1</td><td><textarea name="howto1"></textarea></td></tr> <tr><td>2</td><td><textarea name="howto2"></textarea></td></tr> <tr><td>3</td><td><textarea name="howto3"></textarea></td></tr> <tr><td>4</td><td><textarea name="howto4"></textarea></td></tr> </table> <input type="button" value="add" onclick="myTextAreaAdd(this)">
その他の回答 (5)
- sh_hirose
- ベストアンサー率66% (56/84)
No.4です。 バグがあったので・・・。（theadなどがある場合にも対応） function add() { if( size == 15 ) return; var table = doc.getElementById("table"); var childs = table.getElementsByTagName("tbody"); var body = table; if( childs != null && childs[0].tagName.toLowerCase() == "tbody" ) { body = childs[0]; } createChild(body); }
お礼
有難うございます。 うまくいきました。 助かりました。
- sh_hirose
- ベストアンサー率66% (56/84)
>document.createElement("tr")とかを使ってやろうとしていますがうまくいきません。 たぶんtbody要素ではなくtable要素に追加しようとしているためです。 No.2の方より >Firefox, Opera, Safariではtbody要素がなくても動きますが、IEでは動かなくなります。 とのことなのでtbody要素があればtbody要素に、なければtable要素に追加するようにしました。 <html> <head> <title>sample</title> <script type="text/javascript"> <!-- var doc = window.document; var size = 5; function add() { if( size == 15 ) return; var table = doc.getElementById("table"); var child = table.childNodes[0]; var body = table; if( child.tagName.toLowerCase() == "tbody" ) { body = child; } createChild(body); } function createChild(body) { var tr = doc.createElement("tr"); body.appendChild(tr); var td = doc.createElement("td"); td.appendChild(doc.createTextNode(++size)); tr.appendChild(td); td = doc.createElement("td"); tr.appendChild(td); var textarea = doc.createElement("textarea"); textarea.setAttribute("name", "howto" + size); td.appendChild(textarea); } // --> </script> </head> <body> <table id="table" summary=""> <tr><td>1</td><td><textarea name="howto1"></textarea></td></tr> <tr><td>2</td><td><textarea name="howto2"></textarea></td></tr> <tr><td>3</td><td><textarea name="howto3"></textarea></td></tr> <tr><td>4</td><td><textarea name="howto4"></textarea></td></tr> <tr><td>5</td><td><textarea name="howto5"></textarea></td></tr> </table> <input type="button" value="add" onclick="add()"/> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
けんしょうしてないけど・・・ばぶぅ。 document.getElementById('b').onclick = function(){ var max = 15, b = document.getElementById('t'), n = b.rows.length, t; if ( n < max) { t = b.rows[0].cloneNode(true); t.childNodes[0].firstChild.nodeValue = ++n; t.childNodes[1].name,'howto' + n; b.appendChild(t); this.disabled=n==max; } }
これでどうでしょう？ どんな風につまづいたのかわからなかったので、何を実現したいのかを汲み取ったつもりです。 ご質問中にある「obj.disabled=true」は、最大数に達したらボタンを押せないようにするという意図だと解釈してあります。 気をつけるべきポイントとしては、tbody要素を入れる必要があることでしょうか。 Firefox, Opera, Safariではtbody要素がなくても動きますが、IEでは動かなくなります。 --- <html> <head> <script> window.onload = function() { document.getElementById('b').onclick = function(){ var max = 15; var table = document.getElementById('t'); var rows = table.getElementsByTagName('tr').length; if ( rows < max) { table.appendChild(createRow(++rows)); } this.disabled = ( rows >= max ); function createRow(n) { var row = document.createElement('tr'); var cell = document.createElement('td'); cell.appendChild(document.createTextNode(n)); row.appendChild(cell); var area = document.createElement('textarea'); area.setAttribute('name','howto'+n); cell = document.createElement('td'); cell.appendChild(area); row.appendChild(cell); return row; } } } </script> </head> <body> <table> <tbody id="t"> <tr><td>1</td><td><textarea name="howto1"></textarea></td></tr> <tr><td>2</td><td><textarea name="howto2"></textarea></td></tr> <tr><td>3</td><td><textarea name="howto3"></textarea></td></tr> <tr><td>4</td><td><textarea name="howto4"></textarea></td></tr> </tbody> </table> <input id="b" type="button" value="add"/> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
var c=count("howto"); ってなにがしたいのでしょうか？ tag_numでグローバルにカウントしているのですから そちらをつかってみては？ <script> var tag_num=4; function myTextAreaAdd(obj){ var max=15; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(tag_num>=max) obj.disabled=true; } </script> <div id="area"> <textarea></textarea> <textarea></textarea> <textarea></textarea> <textarea></textarea> </div> <input type="button" value="add" onclick="myTextAreaAdd(this)">
補足
ご返答有難うございます。 テーブルで <table> <tr><td>1</td><td><textarea name="howto1"></textarea></td></tr> <tr><td>2</td><td><textarea name="howto2"></textarea></td></tr> <tr><td>3</td><td><textarea name="howto3"></textarea></td></tr> <tr><td>4</td><td><textarea name="howto4"></textarea></td></tr> </table> <input type="button" value="add" onclick="myTextAreaAdd(this)"> で5個目以降を追加しようとしています。 document.createElement("tr")とかを使ってやろうとしていますがうまくいきません。 本当に申し訳ないですが教えて下さい。 宜しくお願いします。
関連するQ&A
- 追加したテキストボックスとテキストエリアの数の制御
下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか？ あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか？ <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>
- 締切済み
- JavaScript
- POSTすると配列の数がおかしくなる
matとquaとhowtoをそれぞれ4つPOSTしているのですが、POSTされたデータを受け取るとmat4つ、qua5つ、howto5つと数がおかしくなります。 なぜかわかりません。とくにインクリメントしていないのに増えます。 教えて下さい。 <script type="text/javascript"> function myAdd(obj){ var max=15; var c=count("mat"); if(c>=max) return false; var oTR=document.createElement("tr"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); if(c>=max-1) obj.disabled=true; } function count(name){ var tags=document.getElementsByTagName("input"); var ta=document.getElementsByTagName("textarea"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); if(tags){ for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } } if(ta){ for(var i=0;i<ta.length;i++){ if(ta[i].name.match(reg)){ c++; } } } return c; } function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } </script> </head> <body> <form method="post" enctype="multipart/form-data" action="check.php"> <textarea name="explain"></textarea> <table id="t0" border> <tbody> <tr> <td><input type="text" name="mat1" /></td> <td><input type="text" name="qua1" /></td> </tr> <tr> <td><input type="text" name="mat2" /></td> <td><input type="text" name="qua2" /></td> </tr> <tr> <td><input type="text" name="mat3" /></td> <td><input type="text" name="qua3" /></td> </tr> <tr> <td><input type="text" name="mat4" /></td> <td><input type="text" name="qua4" /></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd(this)"> <br /> <span id="area"> <textarea name="howto1"></textarea> <textarea name="howto2"></textarea> <textarea name="howto3"></textarea> <textarea name="howto4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd(this)"> <input type="submit" value="送る"> </form>
- ベストアンサー
- JavaScript
- 下の様にjavaScriptでボタンを追加したいのですが、
下の様にjavaScriptでボタンを追加したいのですが、 onclickイベントがＨＴＭＬにかかれません。 どうすればよろしいでしょうか。 よろしくお願いします。 var ele = document.createElement('input'); ele.type = 'button'; ele.value = 'ご意見へ'; ele.name = 'fNext'; ele.onclick = "sendRequest('FE0041')"; objct[0].parentNode.appendChild(ele);
- ベストアンサー
- JavaScript
- JavaScriptでテキストボックスの追加
下記のコードはただ文章を追加するコードです ここまでは勉強して自分で組んでしっかり動きます この文章を追加するところをテキストボックスにして保存したいのですが その方法がわかりません どこをどう変えれば出来るのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <script> function addNode(){ <!--追加する子ノードを生成--> var kodomo = document.createElement("p"); <!--このノードのタグで囲まれている部分のテキストを設定--> kodomo.innerHTML = "これが追加されたｐの領域"; <!--どこに追加するのか親ノードを指定--> var tuika = document.getElementsByTagName("div").item(0); <!--ここから子ノードを追加する命令--> tuika.appendChild(kodomo); } </script> </head> <body> <h1>ノードを追加します</h1> <!--初期状態は何にもなし--> <div></div> <div> <p>ここはHTMLで書かれているテキスト</p> </div> <!--ボタン--> <button onClick="addNode();">追加</button> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptを使ってXMLにタグを打ち込みたいんですが。。
プログラミング初心者で申し訳ありません。 JavaScriptを使っているのですが、ボタンを押して、<math>～</math>の中に数式のタグを入力しようとしています。 現状のソースですが、 ファイル名：sample.xhtml ～ <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> #数式のタグの入力位置 </math> <script type="text/javascript"> function mul1(){ var info = document.getElementById("math"); var txt1 = document.createTextNode("<mi>"); var txt2 = document.createTextNode("x"); var txt3 = document.createTextNode("</mi>"); info.appendChild(txt1); info.appendChild(txt2); info.appendChild(txt3); } </script> <form> <input type = "button" value="x" onclick ="mul1()" /> </form> ～ となっています。 理想は <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> <mi>x</mi> </math> ボタンクリック後こういう感じでタグを挿入したいと考えています。 function mul1(){ var info = document.getElementById("math"); var element1 = document.createElement("mi"); var element2 = document.createElement("/mi"); var txt = document.createTextNode("x"); info.appendChild(element1); info.appendChild(txt); info.appendChild(element2); } 要素追加と思いcreateElement()で検証してみたんですが、結果はなにも表示されませんでした。 言葉不十分で申し訳ありませんが、解決法教えていただけませんか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テーブルにおける行(セルにプルダウン含む）の追加方法
追加ボタンを押度に，テーブルに１行ずつ追加されるプログラムを組んでいるのですが，追加ボタンを押しても何も起こりません．1行には，テキストボックスとプルダウンメニューの２つのセルが含まれます．テキストボックスのみであれば，追加に成功します． プルダウンのメニュー項目の追加方法ではなく，プルダウン自体を複製して追加していきたいのですが，参考サイトが見つかりませんでした．また，各行を識別する為一意の名前をつけたいのですが，どう記述したらよろしいでしょうか． お手数おかけしますが，下記ソースのどこが間違っているのか，どう処理すべきなのかを，ご教示頂けますでしょうか．お願い致します． <BODY> <TABLE id="Table1"> <TR> <td class="cellWhite"><input type="text" value="単語入力" onFocus="cText(this)" onBlur="sText(this)" style="color:#999"></td> <td bgcolor="#5096C9" width="113px"> <select name="column"> <option value="00">赤</option> <option value="01">青</option> <option value="02">黄</option> </select></td></tr></TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1");} var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.setAttribute("class","cellWhite"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("value","単語入力"); tx1.setAttribute("onFocus","cText(this)"); tx1.setAttribute("onBlur","sText(this)"); tx1.setAttribute("style","color:#999"); td1.appendChild(tx1); var td2 = document.createElement("td"); var selectName="column";//selectの名前 var options={0:"赤",1:"青",2:"黄"}; var c=sel.firstChild; while(c){ if(c.name==selectName) sel.removeChild(c); c=c.nextSibling;} var e=document.createElement("select"); e.setAttribute("name",selectName); for(var i in options){ var o=document.createElement("option"); o.setAttribute("value",options[i]); o.appendChild(document.createTextNode(options[i])); e.appendChild(o);} sel.appendChild(e); tr.appendChild(td1);tr.appendChild(td2);tbl.appendChild(tr);}</script> 参考にしたサイトです： http://oshiete1.watch.impress.co.jp/qa4074195.html http://okwave.jp/qa299889.html
- ベストアンサー
- JavaScript
- appendChildとinnerHTMLを短く
テーブルのthタグと内容を追加したい ・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです ・どうすれば良いでしょうか？ var tr = document.createElement("tr"); tbody.appendChild(tr); var th = document.createElement("th"); th.innerHTML = '見出1'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出2'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出3'; tr.appendChild(th); var th = document.createElement("th"); ……
- ベストアンサー
- JavaScript
- ボタンを押してテキストボックスを追加しテーブルの作成
avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>
- ベストアンサー
- JavaScript
- javascriptで要素の構造を生成
昨日質問したプログラムの続きなんですが、 実はクリックした画像を大きくしたくてその方法を考えています function getElements ( obj ) { //イメージタグここから var src = obj.getAttribute('src'); var element = document.createElement('img'); element.src = src; //div生成 var box = document.createElement('div'); box.style.position = 'fixed'; box.class = 'photobig'; box.style.top = '50%'; box.style.left = '50%'; box.style.width = '900px'; box.style.height = '600px'; box.style.background = '#000000'; box.style.opacity = '0.7'; box.style.marginTop = '-300px'; box.style.marginLeft = '-450px'; box.innerHTML = element;//←ここが問題 var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(box); // body要素にdivエレメントを追加 // var objPhotobox = document.getElementsByClassName("photobig").item(0); // objPhotobox.appendChild(element); } javascriptでdivを生成し、その中にimgタグで画像を入れようとしています appendChildで生成した後で、innerHTMLにimgタグの情報を入れようとしています innerHTMLに変数をいれてもタグとして生成されないのが分かったところで、 divにクラス名を付けてそのクラスにappendChildしてみたんですが、これもダメでした どうすればよいのか見当つかず困っています 生成した後のものを扱うのが難しそうなので一度にすべて生成するようにするのかなと思いつつやり方がわかりません よろしくお願いします
- ベストアンサー
- JavaScript
- JavaScriptのノードについて教えてください
以下のコードなのですが追加されたテキストエリアにidをつけて保存する方法を教えてください それとテキストアリアを追加したときに横に並んで表示されるのですが 改行して表示するにはどうすればいいのでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); function addNode(){ <!--追加する子ノードを生成--> var kodomo = document.createElement("textarea"); <!--このノードのタグで囲まれている部分のテキストを設定--> kodomo.value = ""; <!--どこに追加するのか親ノードを指定--> var tuika = document.getElementsByTagName("div").item(1); <!--ここから子ノードを追加する命令--> tuika.appendChild(kodomo); } </script> </head> <body> <h1>テキストエリアの追加</h1> <!--初期は何もなし--> <div></div> <div><p>書き込んでください</p></div> <!--ボタン--> <button onClick="addNode();">追加</button> </body> </html> また追加ボタンを押したときに画面上部にテキストボックス、その下にテキストエリアを出す方法ってありますか？
- 締切済み
- JavaScript
お礼
ああ・・・なるほどです。 こういう方法があるんですね・・・。 とても勉強になりました。 有難うございました。