人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript DOM で、ノード属性値変更についてですが。

以下のような<table>があり、<tr>配下の<input type="hidden">のvalue属性値を空にしたいのです。
<table>
<thaed>
<tr><td>No.</td><td>タイトル</td></tr>
<tbody id="p2146-tbody"><tr><td>1</td><input type="hidden" name="ids[]" value="123" /><td><input type="text" name="chapts[]" size="20" value="" /></td><tr>
<tr><td>1</td><input type="hidden" name="ids[]" value="124" /><td><input type="text" name="chapts[]" size="20" value="" /></td><tr>
<tr><td>1</td><input type="hidden" name="ids[]" value="125" /><td><input type="text" name="chapts[]" size="20" value="" /></td><tr>
</tbody>
</table>
上から三番目の<tr>の子ノード<input type="hidden" name="ids[]" value="125" />のvalue値を
value="" に変化させたいのです。

firefoxでは、以下のスクリプトで変化させれましたが、IEではダメでした。
function chgValue() {
var tbody = document.getElementById("p0518-tbody");
var list = tbody.childNodes[2];
var input = list.childNodes[0];
input.value = "222";
return false;
}
IEでは、値が変わりません。
どのようにノードを取得したらよいのでしょうか?

●質問者: gdwtseq
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●200ポイント ベストアンサー
var ids = document.getElementsByName('ids[]');
ids[2].value = '';

http://q.hatena.ne.jp/answer


gdwtseqさんのコメント
早速の回答ありがとうございます。 でも実は、listオブジェクトからノードを取得する回答を期待しています。 三つ目の&lt;tr&gt;はあるonclickイベントをきかっけに増加した&lt;tr&gt;なんです。 こちらのサイトをご参照いただけると解り頂けると思うのですが、 http://mae.chab.in/archives/2146 そのonclickイベントハンドラは、以下です。 function addList(obj){ var tbody = document.getElementById("p2146-tbody"); var tr = obj.parentNode.parentNode; var list = tbody.childNodes[0].cloneNode(true); // 複製した行のを指定し、 var input = list.childNodes[0]; input.value = ""; // 複製したノード「list」を直後の兄弟ノードの上に挿入 // (「tr」の下に挿入) tbody.insertBefore(list , tr.nextSibling); } 質問で書いたchgValue()は模擬のもので、 実際は上で書いたaddList(obj)の流れの中でノードを取得し、 value="" としたいです。 Firefox(3.6)では、正常に動作しましたが、 IE(8)では、value属性値を変化させれず、cloneNode(true);した際の value="123" のままなのです。

Cherenkovさんのコメント
jQueryはなしですか?

Cherenkovさんのコメント
childNodesで取得するのはいい筋とはいえないと思います。要素名で絞ったり相対的に指定したほうがいい。

Cherenkovさんのコメント
もう一度やりたいことに近いちゃんとしたサンプルコードを提示してもらったほうが早いかと。 http://jsfiddle.net/

Cherenkovさんのコメント
<thead>がtypoかつ閉じてない

Cherenkovさんのコメント
Firefoxでうまくいくというが提示されたコードではchildNodesの位置が合わずうまくいくわけがない。

Cherenkovさんのコメント
tbodyのchildNodesですが改行文字も含まれたりするのでよくないです。 http://gyazo.com/08ac560f28ccdd467a77e6191b2d6334

Cherenkovさんのコメント
>|javascript| function chgValue() { var tbody = document.getElementById("p2146-tbody"); var list = tbody.childNodes[2]; list.nextSibling.nextSibling.nextSibling.childNodes[1].value = ''; return false; } ||< jquery使いたい…

Cherenkovさんのコメント
listオブジェクトにこだわらずに発想を柔軟にして、常に一定の条件を洗いなおしたほうがスマートになりそうです。 JSのコードは捨てて、HTMLとやりたいことを提示したほうが早いかと。

gdwtseqさんのコメント
たくさんのご指摘ありがとうございます。 あわてて書いてソース内容に間違いが多くてすみません。 訂正してご提示します。 &lt;thead&gt; &lt;tr&gt;&lt;td&gt;タイトル&lt;/td&gt;&lt;td&gt;行追加&lt;/td&gt;&lt;/tr&gt; &lt;/thead&gt; &lt;tbody id="p2146-tbody"&gt;&lt;tr&gt;&lt;input type="hidden" name="ids[]" value="123" /&gt;&lt;td&gt;&lt;input type="text" name="chapts[]" value="DBから取得したデータ?" /&gt;&lt;/td&gt;&lt;input type="button" value="+" onclick="addList()" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;input type="hidden" name="ids[]" value="124" /&gt;&lt;td&gt;&lt;input type="text" name="chapts[]" value="DBから取得したデータ?" /&gt;&lt;/td&gt;&lt;input type="button" value="+" onclick="addList()" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; webページを開いた時点で、&lt;table&gt;構成は以上です。 (すみませんが、name属性の"ids"と"chapts"の各括弧が、 この入力ボックスから上手く表示できません。) 目的は、まず2列目の&lt;input&gt;のonclickで行を追加し、 次に追加した行の&lt;input type="hidden" name="ids[]" .../&gt;の value値を空にすることです。 当方は、clickイベントハンドラで&lt;tbody&gt;の先頭;&lt;/tr&gt;を、 var tbody = document.getElementById("p2146-tbody"); var list = tbody.childNodes[0].cloneNode(true); してクローンを作り、 クローンの&lt;input type="hidden" name="ids[]" value="123" /&gt;を取得し、value値を""に書き換えました(Firefox成功)。 それから、tbody.insertBefore( でクローン行を挿入しました。 jQueryも使えないことは無いです。 最終目的は、ここで生成したFORMデータをサーバにPOSTして、 データベースに対してidsがあるものは[UPDATE]、idsがないものは[INSERT]することです。

Cherenkovさんのコメント
コメント欄はhtmlタグがまともに使えないので以下のサービスの利用をおすすめします。 https://gist.github.com/ http://jsfiddle.net/ 所感 -tr直下にinputが入って気持ち悪い。 -提示されたコードはfirefoxでも動かない。 -参考にされたサイトは途中であきらめてjQueryを使っている。 こうですか? https://gist.github.com/2849594

Cherenkovさんのコメント
IE9でIE8モードにして確認 tr直下にinputは置けないようですね。 http://gyazo.com/e5ad6d1c2d51682f6df5a3a8fa79c8b6

Cherenkovさんのコメント
修正しました。IEでもいけるはず。だめなら正しいHTMLを再提示。

Cherenkovさんのコメント
毎回getElementByIdでtbodyを探さずに、onclick="addList(this)" のthisを基点に探したほうが賢い。 childNodesで辿らずに、thisを基点に探したほうが賢い。 と思います。

gdwtseqさんのコメント
度々ご返信いただきありがとうございます。 また、なかなか返答ができず、すみません。 https://gist.github.com/2849594 でご提示いただいたコードで、IE8 & Firefox3.6 で正常に動くことを 確認しました。期待した動きでした。 ありがとうございます。 また、それに関連したアドバイス・ご指導をいただきまして大変勉強になりました。 本当にありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ