jquery - 如何通过jQuery更改浏览器上HTML表格的宽度

Question

我正在制作一个考试网站，我为 jQuery 准备了我的 html，现在我想为用户提供在他将鼠标放在表格边框上并拖动它时更改表格的宽度。因为有些答案可能比我的默认位置长。

我应该使用什么api？我猜我应该使用 drag() api，但我还需要什么？

如果你们也能给我提供一些例子，我也会很感激:)

Answer 1

一些提示：

$(selector).width();

$(selector).mousedown(function(){});

$(selector).mouseup(function(){});

Answer 2

工作演示 http://jsfiddle.net/YfnjA/

希望能帮助到你。

当您单击并拖动它时，它将允许您调整大小，休息时您可以随意玩耍并按照自己的方式进行操作：)

代码

$(function() {
    var pressed;
    var start;
    var startX;
    var startWidth;
    var wrapper = $("div#wrapper");
    var container = $("table#container");

    $("table th").mousedown(function(e) {
        start = $(this);
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
        pressed = true;
    });

    $(document).mousemove(function(e) {
        if(pressed) {
            var newWidth = startWidth + (e.pageX - startX);
            start.width(newWidth);
            wrapper.width(container.width() + 10);
        }
    });

    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});​