javascriptでボタンを押すたびにテキストエリアを追加

解決済

質問者：eccschool
質問日時：2009/05/15 17:34
回答数：6件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： yambejp
回答日時：2009/05/18 14:17

ちょっと微妙だけど、各行の共通部分が多いなら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)">

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.5

回答者： sh_hirose
回答日時：2009/05/16 07:03

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);
}

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.4

回答者： sh_hirose
回答日時：2009/05/15 22:34

>document.createElement("tr")とかを使ってやろうとしていますがうまくいきません。

たぶんtbody要素ではなくtable要素に追加しようとしているためです。

No.2の方より
>Firefox, Opera, Safariではtbody要素がなくても動きますが、IEでは動かなくなります。
とのことなのでtbody要素があればtbody要素に、なければtable要素に追加するようにしました。

<html>
<head>
<title>sample</title>
<script type="text/javascript">

</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>

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2009/05/15 21:27

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

　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;
　　}
　}

- 0
- 件

通報する

No.2

回答者： noname#137826
回答日時：2009/05/15 20:44

これでどうでしょう？

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

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2009/05/15 18:26

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

通報する