- ベストアンサー
JavaScriptで、テキストボックスを指定する変数を動的に変更した
JavaScriptで、テキストボックスを指定する変数を動的に変更したいのですが どのように変えればいいのでしょうか。 現在、HTML上で、テキストボックスの名前を'r001'から'r300'まで持っている 表を扱っているのですが、 その'r001'から'r300'までの数字の部分を、 動的にアクセスできるように変更したいのです。 こういった場合、どのようにプログラミングしていいのかを いくらGOOGLEなどで調べても出てこなかったので、どなたか 知っている方がいれば教えてください。
- katsumi001
- お礼率52% (50/95)
- JavaScript
- 回答数6
- ありがとう数11
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function change(f) { var nam = f.elements["c_name"].value; var val = f.elements["c_value"].value; var inp, message = "指定のnameの要素はありません"; if (nam) { nam = "00" + nam; nam = "r" + nam.substring(nam.length-3); inp = document.getElementsByName(nam)[0]; if (inp) { message = "指定の要素はtextboxではありません"; if (inp.nodeName == "INPUT" && inp.type == "text") inp.value = val, message=""; } } if (message) alert(message); } //--> </script> </head> <body> <form> 番号: <input type="text" name="c_name">番のテキストボックスの内容を <input type="text" name="c_value">に変更する <input type="button" value="実行" onclick="change(this.form)"> </form> <hr> <div> r001 <input type="text" name="r001"><br> r002 <input type="text" name="r002"><br> r003 <input type="text" name="r003"><br> r004 <input type="text" name="r004"><br> r005 <input type="text" name="r005"><br> r006 <input type="text" name="r006"><br> ・・・・ </div> </body> </html>
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
まったく、かんがえかたがちがいますが、 「てーぶるのｘれつのｙぎょうめの、いんぷっとようその、あたいをへんこうする」 というのはどう？ （ぜんかくくうはくは、はんかくに） <!DOCTYPE html> <title></title> <body> <table id="t0" border="1"> <tr><th>a<th>b<th>c <tr><th>1<td><input type="text" name="r001" value="100"><td><input type="text" name="r002" value="200"> <tr><th>2<td><input type="text" name="r003" value="100"><td><input type="text" name="r004" value="200"> </table> <script> var setTableInputValue = (function ( checker, getChildNode ) { return function (tableNode, x, y, value) { var i = 0, c, cells = getChildNode (tableNode.rows[y].cells[x], checker); while (c = cells[i++]) c.value = value; };})( function (n) {return n && 'INPUT' === n.nodeName && 'text' === n.type;}, function (root, condFunc) { var result = [ ], node = root, n; do { n && (node = n) && (! condFunc || condFunc (n)) && result.push (n); if (n = node.firstChild, ! n) while (n = node.nextSibling, ! n) if (node = node.parentNode, ! node || node == root) return result; } while (node); return result; }); //_________ node.getElementsByTagName で、よいのだろうけど・・・ setTableInputValue (document.getElementById('t0'), 1, 2, 'Changed !!'); </script>
お礼
ありがとうございました。参考にしてみます。
- fujillin
- ベストアンサー率61% (1594/2576)
#3です なぜか、前半が切れてしまった。 ご質問が、 ・要素にアクセスする方法や値のセット方法がわからない ・番号など（1とか123とか）をもとに要素にアクセスする方法がわからない ・ユーザからの入力などとのインターフェースをどうしたらよいのかわからない などなど、どのあたりがわからないのか不明ですが、とりあえず極簡単なサンプルを作成してみました。 （仮に、同じnameの要素が複数存在する場合は、最初のものが対象になるようにしています。） （以下#3の内容）
お礼
ありがとうございました。参考にしてみます。
- yyr446
- ベストアンサー率65% (870/1330)
もしかして、質問の主旨が違ってたかな <input type="text" name="r003" value="hoge"> に対して var name= 'r003'; お好きなのをどうぞ、 document.getElementsByName(name)[0].value="fuga"; document.getElementById(name).value="fuga"; //IEはまだまだ..↓ document.querySelector('input[name="' + name + '"]').value="fuga";
- zeff
- ベストアンサー率69% (137/198)
名前、と言うのがもしname属性のことなら、 例えば、 <form id="form1"> <input type="text" name = "r001"> </form> だったら、 document.getElementById("form1").elements["r001"]; で取得することでしょうか？フォーム部品:elements。 https://developer.mozilla.org/ja/DOM/form.elements 数字の部分を動的にアクセス？ var e = document.getElementById("form1").elements["r001"]; e = e.name.replace("r","");//nameからrを取り除く n = parseInt(e);//100を数値にして取り出す ということ？
お礼
ありがとうございました。参考にしてみます。
- yyr446
- ベストアンサー率65% (870/1330)
数字の部分を、動的にアクセス ＝＞ Number.toString(n) 数値をｎ進数(省略時10進数)の文字列に変換 の応用でできると思います。'0'を加える処理を追加 して連結するだけです。 簡単に書くと（もっとショートコーディングが出来るかもしれんが） var name; for(var i=0;i <= 300; i++){ if(i<10) name = 'r'+ '00' + i.toString(); elase if(i<100) name = 'r'+ '0' + i.toString(); elase name = 'r' + i.toString(); document.write(name); }
お礼
ありがとうございました。参考にしてみます。