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;
}
教えてください。宜しくお願いします。
No.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)">
No.5
- 回答日時:
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);
}
No.4
- 回答日時:
>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>
No.3
- 回答日時:
けんしょうしてないけど・・・ばぶぅ。
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;
}
}
No.2
- 回答日時:
これでどうでしょう?
どんな風につまづいたのかわからなかったので、何を実現したいのかを汲み取ったつもりです。
ご質問中にある「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>
No.1
- 回答日時:
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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript JAVASCRIPT 2 2022/04/15 15:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
JSで、テーブルのある行のみ、...
-
プルダウンで選択すると、DBの...
-
テーブルで複数行をまとめて非...
-
【UWSC】HTML内のある部分を抽...
-
JavaScriptで特定のtdタグにcla...
-
JavaScript チェックボックスで...
-
Selenium.ChromeDriverの使い方...
-
二次元配列に数字をランダムに...
-
特定の文字列を挿入
-
javascript クリックすると、あ...
-
スクロールバーの表示位置を変...
-
tableの任意行にfocusをあてる
-
IE以外でdisplay:noneで隠した...
-
何番目のクラスか取得するには
-
正規表現で、希望するセルへ色...
-
jqueryでどうやってエスケープ?
-
マウスをブラウザの外に出した...
-
javascriptで質問です。 displa...
-
テーブルのある列を非表示にす...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
JavaScriptでテーブルをクリッ...
-
【UWSC】HTML内のある部分を抽...
-
至急!GetElementById でtdの...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
動的なtableの値を取得したい
-
Selenium.ChromeDriverの使い方...
-
二次元配列に数字をランダムに...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
テーブルの変数について
-
マウスをブラウザの外に出した...
-
テーブル行のクリックでチェッ...
-
jquery datatablesを使用 イン...
おすすめ情報