Question

我正在尝试为响应式网站制作一个jQuery插件，用于检查表格是否太大而无法放在页面上。如果是这样，它应该隐藏表并显示一个按钮。单击该按钮时，它将在新窗口中打开该表。这可以防止表格破坏响应式布局。

问题：

我定义了两个在页面加载时启动的函数，以及页面调整大小：

// Call on page load and page resize
tableChecker();
$(window).resize(function () {
    tableChecker();
    resizeUp();
});

目前，这些功能同样适用于页面上的每个表格。但是，我需要它们专门应用于每个表。这意味着当它检查表的宽度时，它需要为每个表执行该操作，因为它们可能是不同的宽度。

我的一个功能示例：

function tableChecker() {
    var windowWidth = parseInt($(window).width()),
        tableWidth = parseInt($('.responsive-table table').outerWidth());
    if (windowWidth < tableWidth) {
        var finaltableWidth = parseInt($('.responsive-table table').outerWidth());
        $('.responsive-table').prop('title', finaltableWidth);
        $('.viewtable').show();
        $('.responsive-table table').hide();

    }
}

如何将此功能单独应用于每个表？

调整我的jsfiddle示例 - ＆gt; http://jsfiddle.net/kthornbloom/fg3Eq/5/

如果有人可以告诉我为什么标题不能在生成的页面上运行，那么

Answer 1

可能是这样的：

Jsfiddle：http://jsfiddle.net/fg3Eq/6/

function tableChecker(tableToResize) {
    var windowWidth = parseInt($(window).width()),
        tableWidth = parseInt($(tableToResize).outerWidth());
    if (windowWidth < tableWidth) {
        var finaltableWidth = parseInt($(tableToResize).outerWidth());
        $(tableToResize).attr('data-width', finaltableWidth);
        $('.viewtable').show();
        $(tableToResize).hide();

    }
}

// Show table again if sized back up
function resizeUp(tableToResize) {
    var windowWidth = parseInt($(window).width());
    var minWidth = parseInt($(tableToResize).data('width'));
    if (windowWidth > minWidth) {
        $(tableToResize).show();
        $('.viewtable').hide();
    }
}


$(window).resize(function () {
    tableChecker($('.tbl1'));
    resizeUp($('.tbl1'));
    tableChecker($('.tbl2'));
    resizeUp($('.tbl2'));
});

Answer 2

$('.responsive-table table').outerWidth()只会得到jQuery选择中第一项的宽度，你需要循环，.each可能

在页面调整大小时，将功能分别应用于多个项目

2 个答案: