テーブルのセルを入力欄を入力値の表示で切り替える

programming javascript

コードを書いてみました。セル（というか数値）をクリックすると入力欄に切り替わり、フォーカスを外すとその時の値で確定します。


が、何か格好悪い。
もっとスマートな方法がありそうですが。

<html>
<head>
<script type="text/javascript"><!--
function InputUp(cell){
    var valueCell = cell + "-value";
    var inputCell = cell + "-input";
    
    var text = document.getElementById(valueCell).innerHTML;
    document.getElementById(valueCell).innerHTML = '';
    
    var text = '<input type="text" id="input_area" onblur="InputDown(\'' + cell+ '\');" value="' + text + '">';
    //window.alert(text);
    document.getElementById(inputCell).innerHTML = text;
    document.getElementById("input_area").focus();
}

function InputDown(cell){
    var valueCell = cell + "-value";
    var inputCell = cell + "-input";
    
    var text = document.getElementById("input_area").value;
    
    document.getElementById(inputCell).innerHTML = '';
    document.getElementById(valueCell).innerHTML = text;
}
//--></script>
</head>
<body>
<table border="1" cellspacing="1">
    <tbody>
        <tr>
            <td>
                <span id="1-1-value" onclick="InputUp('1-1');">12</span><span id="1-1-input"></span>
            </td>
            <td>
                <span id="1-2-value" onclick="InputUp('1-2');">12</span><span id="1-2-input"></span>
            </td>
        </tr>
    </tbody>
</table>

</body>
</html>

あと、入力値を空で確定すると、領域（幅？）がなくなるので次回の編集に入れなくなる。
cssきちんとして、幅を取ればいいのだろうけど。


追記
パラグラフ単位でこのエントリを見ようとすると、javascript部分が消えるようです。日付単位で閲覧してください。