- ベストアンサー
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")とかを使ってやろうとしていますがうまくいきません。 本当に申し訳ないですが教えて下さい。 宜しくお願いします。
お礼
ああ・・・なるほどです。 こういう方法があるんですね・・・。 とても勉強になりました。 有難うございました。