テーブルのセルを「編集ボックス」と「値の表示」で入れ替えられるようにする

要ははてなグラフみたいな事がしたかった訳です。
http://d.hatena.ne.jp/kcha/20080619/1213854498の改善版です。

前回のコードは色々と間抜け

だと自分でも思います。最初から「編集」の領域と、「表示」の領域の２つをdivで入れておいて、片方のstyle属性をdisplay:noneしておけば簡単だったのに。

まずは指定箇所のＨＴＭＬコード。（必要な箇所しか書きません）

<table>
    <tr>
        <td>
        <div id="value" onclick="Up();">123</div>
        <div id="input" style="display:none;">
            <form style="display:inline;">
                <input type="text" id="text" value="123" onblur="Down();">
            </form>
        </div>
        </td>
    </tr>
</table>

んでjavascriptはこう。

function Up(){
    $("value").style.display = "none";
    $("input").style.display = "inline";

    $("text").select();
}
function Down(){
    $("value").innerHTML = $("text").value;

    $("value").style.display = "inline";
    $("input").style.display = "none";
}

ＨＴＭＬ側のformタグですが、style属性にdisplay:inlineを打っておく必要がありました。でないと、入力欄が出た際に下方向に拡張されてしまいます。（ＩＥでしか確認してませんが）

あいかわらずＣＳＳの勉強が未だです。はよやらんと。