JavaScriptで、テキストボックスを指定する変数を動的に変更したいのですが
どのように変えればいいのでしょうか。
現在、HTML上で、テキストボックスの名前を'r001'から'r300'まで持っている
表を扱っているのですが、
その'r001'から'r300'までの数字の部分を、
動的にアクセスできるように変更したいのです。
こういった場合、どのようにプログラミングしていいのかを
いくらGOOGLEなどで調べても出てこなかったので、どなたか
知っている方がいれば教えてください。
投稿日時 - 2010-09-06 14:33:06
<!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>
投稿日時 - 2010-09-06 15:22:51
お礼
ありがとうございました。参考にしてみます。
投稿日時 - 2010-09-07 18:39:11
7人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（5件中 1～5件目)
まったく、かんがえかたがちがいますが、
「てーぶるのｘれつのｙぎょうめの、いんぷっとようその、あたいをへんこうする」
というのはどう？
（ぜんかくくうはくは、はんかくに）
<!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>
投稿日時 - 2010-09-07 10:30:45
お礼
ありがとうございました。参考にしてみます。
投稿日時 - 2010-09-07 18:38:13
#3です
なぜか、前半が切れてしまった。
ご質問が、
・要素にアクセスする方法や値のセット方法がわからない
・番号など（1とか123とか）をもとに要素にアクセスする方法がわからない
・ユーザからの入力などとのインターフェースをどうしたらよいのかわからない
などなど、どのあたりがわからないのか不明ですが、とりあえず極簡単なサンプルを作成してみました。
（仮に、同じnameの要素が複数存在する場合は、最初のものが対象になるようにしています。）
（以下#3の内容）
投稿日時 - 2010-09-06 15:25:21
お礼
ありがとうございました。参考にしてみます。
投稿日時 - 2010-09-07 18:38:38
もしかして、質問の主旨が違ってたかな
<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";
投稿日時 - 2010-09-06 15:21:10
名前、と言うのがもし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を数値にして取り出す
ということ？
投稿日時 - 2010-09-06 14:59:59
お礼
ありがとうございました。参考にしてみます。
投稿日時 - 2010-09-07 18:39:35
数字の部分を、動的にアクセス
＝＞ 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);
}
投稿日時 - 2010-09-06 14:57:39
OKWaveのオススメ
おすすめリンク
