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;
}
教えてください。宜しくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (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)">
    • good
    • 0
この回答へのお礼

ああ・・・なるほどです。
こういう方法があるんですね・・・。
とても勉強になりました。
有難うございました。

お礼日時:2009/05/20 21:54

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);
}
    • good
    • 0
この回答へのお礼

有難うございます。
うまくいきました。
助かりました。

お礼日時:2009/05/20 21:55

>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>
    • good
    • 0

けんしょうしてないけど・・・ばぶぅ。


 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;
  }
 }
    • good
    • 0

これでどうでしょう?



どんな風につまづいたのかわからなかったので、何を実現したいのかを汲み取ったつもりです。
ご質問中にある「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>
    • good
    • 0

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")とかを使ってやろうとしていますがうまくいきません。
本当に申し訳ないですが教えて下さい。
宜しくお願いします。

補足日時:2009/05/15 18:52
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q