JavaScriptメモテーブルの列の幅をマウスで動的に変えてみる

2011/04/20JavaScript,プログラミング

ひょんな事からテーブルの列の幅をマウスで動的に変更することを考えたので、メモしとく事に。

なかなかややこしいと思ってたけど、HTML+JavaScriptを書いてみたところ、こんな感じでできた。

<head>
    <title>sampel</title>
    <script type="text/javascript">
    <!--
        var target = null;  // クリックしたタグ
        
        // マウスボタンを押したとき
        function mousedown() {
            sx = event.x;   // マウスボタンを押した位置を覚えておく
        }
        
        // マウスボタンを離したとき
        function mouseup() {
            // タグを取得していない場合は処理をスキップする
            if( target == null ) {
                return;
            }
            // 列の幅を変える
            ex = event.x;   // 座標値を取得する
            var tag = document.getElementById("column");    // 列のIDを取得する
            tag.style.pixelWidth = tag.style.pixelWidth + (ex - sx);    // タグの幅をマウスを移動した分だけ変える
            // タグの情報をクリアする
            target = null;
        }
        
        // タグを取得する
        function gettarget(tag) {
            target = tag;
        }
    -->
    </script>
</head>
<body onmousedown="mousedown()" onmouseup="mouseup()">
    <table border="1">
        <tr>
            <td id="column">aaa</td>
            <td onmousedown="gettarget(this);" style="width:1;background-color:gray;"  ></td>
        </tr>
        <tr>
            <td id="column">aaa</td>
            <td></td>
        </tr>
        <tr>
            <td id="column">aaa</td>
            <td ></td>
        </tr>
    </table>
</body>
</html>

tetsuyanboながらのポイントはこうだと思う。