テーブルの一部を入力フィールドにしたい

解決済

質問者：waowaowaowaiwai
質問日時：2005/09/07 21:28
回答数：4件

2列のテーブルを表示するHTMLで、左の列は項目名、
右の列は何かの値とします。最初に表示するときは
テーブルのような形で表示しておきたい（入力など
一切できないようにする）のですが、例えばボタン
を押下することによって、編集モードに移り、
テーブルの右側の値を変更できるようにしたいのです。

値を変更するには、入力フィールドにしなければいけ
ないと思いますが、JavaScript等でそのようなことが
できるのでしょうか？

参考になるURL等の情報でも構いません。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： steel_gray
回答日時：2005/09/08 13:58

ちょっと長いけど新しいブラウザならおおむね動きそうなサンプル。

送信するとなると name が重要だけど、どうするかわからなかったので適当に処理。

<html>
<head>
<title>テーブルの編集・送信</title>

<script type="text/javascript">

</script>

</head>
<body>

<form action="" method="get">

<table border id="dataTable">
<thead><tr><th>項目名</th><th>値</th></tr></thead>
<tbody>
<tr><td>ID</td><td title="id">123</td></tr>
<tr><td>名前</td><td title="name">unknown</td></tr>
<tr><td>その他</td><td title="other">abc</td></tr>
</tbody>
<tbody>
<tr><td colspan=2><input type="reset" value="→編集モード"
onclick="return formActive(this,'dataTable')">
</td></tr>
</tbody>
</table>

</form>

</body>
</html>

この回答への補足

ありがとうございました。
参考にさせていただきます。

補足日時：2005/09/09 09:10

通報する

- 0
- 件

通報する

No.3

回答者： steel_gray
回答日時：2005/09/08 00:56

disabledかreadonlyに設定した入力フィールドの属性を変更するだけの方がテキスト→入力フィールドに変更するより簡単そうですね。

ところでBLUEPIXYさんのおっしゃるとおり、編集可能に変更するだけでは意味がなさそうなんですが編集可能に変更した後、CGIかなにかにフォームとして送信するんでしょうか？

この回答への補足

皆様ありがとうございます。

編集可能にしたあと、フォームとして送信したいです。
教えて頂いた方法では送信はできないんですね？
送信するにはどうすればよいのでしょうか？
こちらでもいろいろ調べてはいるのですが・・

よろしくお願いします。

補足日時：2005/09/08 13:12

通報する

- 0
- 件

通報する

No.2

回答者： BLUEPIXY
回答日時：2005/09/07 23:19

サンプルを作ってみました。

ＩＥで動作します。（他では動作しません）
というか、編集できたとしても、保存できないからあまり意味が無いように思いますが・
---------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>テーブルの中身の変更</title>
<script type="text/javascript">

</script>
</head>
<body>
値の列をダブルクリックして値を変更できます。<br>
変更が終わったら、セルの外をクリックして下さい<br>
<table border="1" cellspacing="0">
<col align="center"><col align="right" style="width:3em">
<tr><th>項目名</th><th align="center">値</th></tr>
<tr><td>A</td><td ondblclick="edit(this)">123</td></tr>
<tr><td>B</td><td ondblclick="edit(this)">789</td></tr>
</table>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： Bonjin
回答日時：2005/09/07 22:13

TDタグのinnerHTMLを書き換えてあげればできると思います。

--サンプル--
<table>
<tr><td id="td1">TEST</td><td><input type="button" onclick="change('td1');" value="編集"></tr>
</table>

function change(id){
var e = document.getElementById(id);
var v = e.innerHTML;
e.innerHTML = "<input type=\"text\" value=\"" + v + "\">";
}