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

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

なかなかややこしいと思ってたけど、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ながらのポイントはこうだと思う。

クリックしたタグとマウスの位置を覚えておく
幅を変えたいセルに同じIDを設定する
テーブルの外にマウスが移動してもマウスボタンを離したイベントを発生させるようにbodyタグにもイベントを設定しておく

で、実行してみるとこんな感じ。
テーブルのグレーのセルでマウスボタンをクリックしたまま右側に移動する…。

マウスのボタンを離すとテーブルの幅が広がる。

ただ、とっても気になるのは選択状態になっちゃうこと。
こりゃ、どうにかならんもんかねぇ。

ちなみに、動作はSafariでのみ。
Firefoxではさっぱり動かなかった…簡単なJavaScriptなんだけどねぇ…これまたブラウザで動作が違う…めんどっち。

そんなこんなで、参考になればドゾ。