• ベストアンサー

JavaScriptで、テキストボックスを指定する変数を動的に変更した

JavaScriptで、テキストボックスを指定する変数を動的に変更したいのですが どのように変えればいいのでしょうか。 現在、HTML上で、テキストボックスの名前を'r001'から'r300'まで持っている 表を扱っているのですが、 その'r001'から'r300'までの数字の部分を、 動的にアクセスできるように変更したいのです。 こういった場合、どのようにプログラミングしていいのかを いくらGOOGLEなどで調べても出てこなかったので、どなたか 知っている方がいれば教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

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

katsumi001
質問者

お礼

ありがとうございました。参考にしてみます。

その他の回答 (5)

回答No.6

まったく、かんがえかたがちがいますが、 「てーぶるのｘれつのｙぎょうめの、いんぷっとようその、あたいをへんこうする」 というのはどう？ （ぜんかくくうはくは、はんかくに） <!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>

katsumi001
質問者

お礼

ありがとうございました。参考にしてみます。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.5

#3です なぜか、前半が切れてしまった。 ご質問が、 　・要素にアクセスする方法や値のセット方法がわからない 　・番号など（1とか123とか）をもとに要素にアクセスする方法がわからない 　・ユーザからの入力などとのインターフェースをどうしたらよいのかわからない などなど、どのあたりがわからないのか不明ですが、とりあえず極簡単なサンプルを作成してみました。 （仮に、同じnameの要素が複数存在する場合は、最初のものが対象になるようにしています。） （以下#3の内容）

katsumi001
質問者

お礼

ありがとうございました。参考にしてみます。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

もしかして、質問の主旨が違ってたかな <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)
回答No.2

名前、と言うのがもし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を数値にして取り出す ということ？

katsumi001
質問者

お礼

ありがとうございました。参考にしてみます。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

数字の部分を、動的にアクセス ＝＞　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);　 }

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テキストボックスの文字の大きさを変更するには

    タグ打ちでWebページを作っています。 テキストボックスに関する質問です。 テキストボックス本体の大きさは下のように記述すれば指定できることはわかっているのですが、 <input type="text" size=xx> テキストボックス内の「文字」の大きさを変更するにはどうすればよいでしょうか。 HTMLタグ、JavaScript、CSSでできる方法を教えてください。

  • Javascriptでテキストボックスを変更したい

    Javascriptを使って、テキストボックスの選択した文字だけ、 大きくしたり色を変えたりしたいのですが、 どのように記述したらいいのでしょうか？ （テキストボックスにhtmlタグ表示ではなく、ビジュアル的にも変更した情報を表示させたい） 最終的にその情報を保存したいと思っております。

  • テキストボックス名を変数で指定してプロパティ設定？

    Ms Access2000，2003 のVBAで テキストボックスのプロパティを変更する時 Me.TextBoxName.Fontsize = 9 などと記述しますが、 この式の左側、テキストボックス名等を変数で処理することが出来るのでしょうか？

  • Javascriptテキストの値で表示文字を変更

    Javascript初心者です。テキストに入力された数字（１～７）をもとに、そのテキストボックスの横に文字を表示させたいです。（１なら「非常にあてはまる」、２なら「ややあてはまる」・・・等） 且つ、1つのHTML内にそのテキストボックスが50個あります。。 それぞれ個別に文字を表示させたいのですが、簡易に記述する方法はありますでしょうか。 同様の質問を拝見しましたが、テキストの値で且つ複数が同一ページで挙動できる方法を見つけることができませんでした。お分かりになる方ご教示いただけますと大変助かります。 よろしくお願いいたします。

  • visual basicのテキストボックスについて

    ビジュアルベーシックでカレンダーを作ろうと考えてます。 日付のところをテキストボックスに数字を入れて、カレンダーに見立てようとしています。 でも、そのテキストボックスに値を代入するとき、一つ一つに textbox1.text=1 textbox2.text=2・・・・ と書いていくのはすごくメンドくさく、非効率的です。 今、自分が考えている解決方法は、javascriptにでてくるdocument.forms[0].elements[a].valueのようなテキストボックスなどの名前を指定しなくても値を代入する方法です。 でも、ビジュアルベーシックにこのような操作が可能なのかわかりません。 知っている方がいたら是非教えてください。

  • ボタンを押すとテキストボックスが増えるJavaScriptについて教えてください

    Javascriptで質問です。 <input type="text" name="hoge1" value=""> <input type="text" name="hoge2" value=""> <input type="text" name="hoge3" value=""> というようなテキストボックスがあり、「追加」というボタンを押すと 新たなテキストボックス <input type="text" name="hoge4" value=""> が追加されるようなJavascriptを作成したいと考えています。 新たに作られたテキストボックスには name="hoge4" name="hoge5" ・ ・ ・ というように、nameの部分に「hogeの右にある番号に1ずつ加算された名前」を付けていきたいのです。 検索すると、テキストボックスを追加していくだけのサンプルはいくつかあったのですが、nameの部分を加算していく、という例が無くて行き詰っています。 よろしくお願いいたします。

  • テーブルの中のテキストボックスについて

    初心者です。 JAVASCRIPTでテーブルの値を参照する時、row,cell指定で出来ますが、 あるセルにテキストボックスがあるときこの値はどのようにすれば参照できるのでしょうか？ テキストボックスの名前ではなく、行・列からたぐっていきたいのです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • JavaScriptを用いてテキストボックスをコントロールしたいのですが…

    閲覧ありがとうございます。 今回、PHPとJavaScriptを用いてとあるシステムの開発を使用と考えています。 　そのシステムには不特定多数の入力項目があり、テキストボックスに何か(情報)を入力することで、また新たなテキストボックスを生成し、次々と情報を入力できるようにしたい。また、エクセルの表のようなもので入力するのもいいかなと考えているのですが可能ですか？ 　次にその値をデータベース(PostgreSQL)に格納したい、また、PHPのフォーム処理は可能ですか？ 　ご意見ご感想、また、やり方などを教えて頂きたいです。

  • アクセスのフォーム上のテキストボックスの行間を指定する方法を教えてくだ

    アクセスのフォーム上のテキストボックスの行間を指定する方法を教えてください。 アクセス初心者です。 フォームにテキストボックスとボタンを配置しておいて，下のように記述すれば，文字の大きさを変更することができました。 行間を変更したい場合は，どう記述すると良いのでしょうか？「 LineSpacing」というプロパティがあることは，何とか分かったのですが，使い方が分かりません。 よろしくお願いいたします。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ Private Sub コマンド98_Click() Me.テキスト１.FontSize = 15 End Sub ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

  • フォームのテキストボックスで・・。

    数字を入力し次のテキストボックスに移るときに自動的に「：」をつけた形にしてaccess上に記憶させるというものを作ってます。たとえばフォームのテキストで「1300」といれたら次のテキストボックスに移るときに自動的に「13:00」とテキストボックスに収められそれをaccess上に残すという形です。うまくいかずに困ってまして大変説明が曖昧ですがどなたか回答くださいますようお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する