Jquery 在“调整页面大小”中，将函数分别应用于多个项目

我正在尝试为响应性网站制作一个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();

    }
} 

函数tableChecker（）{
var windowWidth=parseInt（$（window）.width（）），
tableWidth=parseInt（$（'.responsive table'）.outerWidth（））；
if（窗口宽度<表格宽度）{
var finaltableWidth=parseInt（$（'.responsive table'）.outerWidth（））；
$（'.responsive table'）.prop（'title'，finaltableWidth）；
$（'.viewtable'）.show（）；
$（'.responsive table'）.hide（）；
}
} 

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

调整我的JSFIDLE示例大小->

如果有人能告诉我为什么标题在生成的页面上不起作用，那么奖励积分可能是：

Jsfiddle：

函数表检查器（tableToResize）{
var windowWidth=parseInt（$（window）.width（）），
tableWidth=parseInt（$（tableToResize）.outerWidth（））；
if（窗口宽度<表格宽度）{
var finaltableWidth=parseInt（$（tableToResize）.outerWidth（））；
$（tableToResize）.attr（'data-width'，finaltableWidth）；
$（'.viewtable'）.show（）；
$（tableToResize）.hide（）；
}
}
//重新显示表格（如果备份大小）
函数大小调整（tableToResize）{
var windowWidth=parseInt（$（window.width（））；
var minWidth=parseInt（$（tableToResize）.data（'width'）；
如果（窗口宽度>最小宽度）{
$（tableToResize.show（）；
$（'.viewtable'）.hide（）；
}
}
$（窗口）。调整大小（函数（）{
表格检查器（$（'.tbl1'））；
调整大小（$（'.tbl1'））；
tableChecker（$（'.tbl2'））；
调整大小（$（'.tbl2'））；
});

$（“.responsive table table”）.outerWidth（）

将只获取jQuery选择中第一个项目的宽度，您需要使用

循环。每个
可能是的，这让我走上了正确的轨道。用$（“.rwd table”）.each（function（）{/}）包装每个函数；然后将里面的选择器修改为“this”起作用了。对不起，我正在寻找一种比向表中添加类更自动/动态的方法。
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'));
});