<!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>
<style>
td {
height:24px;
}
</style>
</HEAD>
<BODY>
<form>
<table border onclick="EditStart()">
<tr><th width=20>#</th><th width=100>Name</th><th width=200>Address</th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</form>
<script>
function EditStart() {
var o = event.srcElement;
alert("OK:" + o.nodeName);
var findTd = false;
while (o.nodeName.toLowerCase() != "tr") {
if (o.nodeName.toLowerCase() == "td") {
findTd = true;
break;
}
o = o.parentNode;
}
var editFg = false;
if (findTd) {
if (o.cellIndex > 0) {
editFg = true;
}
}
if (editFg) {
var editor = document.createElement("input");
editor.type = "text";
editor.style.width = "100%";
editor.onkeypress = function(td) {
return function() {
if (event.keyCode == 13) {
td.innerHTML = this.value;
}
}
}(o);
editor.onblur = function(td) {
return function() {
td.innerHTML = this.value;
}
}(o);
o.appendChild(editor);
editor.focus();
}
}
</script>
</BODY>
</HTML>
こんなかんじ。
けっこうめんどくさい。けど、ＬｉｓｔＶｉｅｗたって所詮ＴＡＢＬＥで表現しているだけだから。
このサンプルは、任意のテーブルセルを編集可能状態にして、フォーカスアウトで編集確定して
その位置のテキストＢＯＸを消して入力内容をセルに貼り付けるまで、を示しています。
あとは、hidden を作って、名前をリストに登録しておいて、同じ位置に編集されたら、重複作成
しないようにリストの名前を判定してから、hiddenを作るようにするといいかな・・・
|
