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

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

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

<head>

<title>sampel</title>

<!--

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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

<head> <title>sampel</title> <script type="text/javascript">  </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>

<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ながらのポイントはこうだと思う。