转换脚本以独立处理多个表

Question

当一个页面包含一个表时，我有两个脚本可以完美地工作。然而，现在我需要在同一页面上放置多个支持相同功能的表。

我需要一些帮助来转换这两个脚本，以便在同一页面上处理多个表，同时保持相同的功能。

第一个脚本称为"TABLE DATA STATES"。第二个脚本称为"排序表数据"。

当前JSBin：https://jsbin.com/noyoluhasa/1/edit?html，js，输出

// ===================================================================
// =================== TABLE DATA STATES =============================
// ===================================================================
// Answer to my question on Stackoverflow:
// http://stackoverflow.com/questions/33128718/change-data-attribute-on-click-of-html-elements
// JsFiddle: http://jsfiddle.net/pya9jzxm/14
// Get all rows into the array except the <thead> row
var tbody = document.querySelector('tbody');
var trs = tbody.querySelectorAll('tr');
var tr, index = 0, length = trs.length;
// Start the loop
for (; index < length; index++) {
    tr = trs[index];
    // Set the attributes to default state
    tr.setAttribute('data-state', 'enabled');
    tr.setAttribute('data-display', 'collapsed');
    tr.addEventListener('click',
        function () {
            // If its the row alphabet-label, skip it
            if (this.classList.contains('alphabet-label')) {
                return;
            }
            // Conditional logic to make the rows reset after clicking away from highlighted row
            var trIndex = 0, trLength = trs.length, hasExpanded = false;
            var state = 'disabled';
            if (tbody.querySelectorAll('[data-display="expanded"]').length > 0) {
                hasExpanded = true;
                state = 'enabled';
            }
            for (; trIndex < trLength; trIndex++) {
                // Set all rows to disabled on click of any row
                trs[trIndex].setAttribute('data-state', state);
                // Reset the display of all rows
                trs[trIndex].setAttribute('data-display', 'collapsed');
            }
            if (!hasExpanded) {
                // Set the clicked row to active highlighted state
                this.setAttribute('data-state', 'enabled');
                this.setAttribute('data-display', 'expanded');
            }
        }
    );
}

// ===================================================================
// =================== SORT TABLE DATA ===============================
// ===================================================================
// For reference:
// this.setAttribute('data-state', this.getAttribute('data-state').contains === "enabled" ? "disabled" : "enabled");
// Adds icon to clicked <th>
// VanillaJS version - opted for jquery.tablesorter plugin due to flexibility and ease of use
var thsort = document.querySelectorAll('th')
//console.log(thsort);
var sort, sortIndex = 0, sortlength = thsort.length;
for (; sortIndex < sortlength; sortIndex++) {
    sort = thsort[sortIndex];
    //console.log(sort);
    // On click to sort table column, do this:
    sort.addEventListener('click',
        function () {
            var rm, rmIndex = 0;
            for (; rmIndex < sortlength; rmIndex++) {
                rmsort = thsort[rmIndex];
                // Remove sort icon from other <th> elements
                rmsort.classList.remove('sort-key');
                // Add sort icon to this <th>
                this.classList.add('sort-key');
                //console.log(rmsort);

                // Conditional logic to switch asc desc label
                var state = 'asc', prevState = 'desc', hasAsc, prevState;
                if (this.classList.contains('asc')) {
                    hasAsc = true;
                    state = 'desc';
                    prevState = 'asc';
                    //console.log(prevState);
                }
                // Set all rows to disabled on click of any row
                this.classList.add(state);
                this.classList.remove(prevState);
                //if (hasAsc) {
                //    // Set the clicked row to active highlighted state
                //    this.setAttribute('class', state);
                //}
            }
        }
    );
}

除了用thisTable替换tbody的实例外，我还尝试用这个代码包装我的代码，但后来脚本只适用于表的最后一次出现：

var alltables = document.querySelectorAll('tbody')
console.log(alltables);
var thisTable, sortIndex = 0, sortlength = alltables.length;
for (; sortIndex < sortlength; sortIndex++) {
    thisTable = alltables[sortIndex];
    // original code here
}

Answer 1

所以这实际上只是一个范围问题。您在事件处理程序中引用了tbody和trs的NodeList，但由于有多个表，这些值会随着时间的推移而更改。当调用这些处理程序并看到tbody时，它首先检查该变量是否是其当前作用域的一部分，而不是。因此，它会检查下一个作用域，直到找到它。但它找到的是该变量随时间变化的最后一个值。

解决这个问题的最简单方法是将原始代码块包围在函数中，在调用时赋予它作用域，并调用该函数，为每个表将当前表传递给它。那么，该函数的作用域中唯一的东西就是我们关心的表，并且我们在该函数中创建的每个变量（如trs）都将只在该特定函数调用的作用域内。

看看下面的代码，看看fiddle，如果你对此有任何疑问，请告诉我。你可以看到，我使用了你最初对所有表的循环的想法，只是我找到了基于table类的表，查询了表的tbody，并将其传递给了我们的configureTable函数。

Fiddle：https://jsfiddle.net/rbpc5vfu/

配置表功能：

function configureTable (tbody) {
    var trs = tbody.querySelectorAll('tr');
    var tr, index = 0,
        length = trs.length;
    // Start the loop
    for (; index < length; index++) {
        tr = trs[index];
        // Set the attributes to default state
        tr.setAttribute('data-state', 'enabled');
        tr.setAttribute('data-display', 'collapsed');
        tr.addEventListener('click',
            function() {
                // If its the row alphabet-label, skip it
                if (this.classList.contains('alphabet-label')) {
                    return;
                }
                // Conditional logic to make the rows reset after clicking away from highlighted row
                var trIndex = 0,
                    trLength = trs.length,
                    hasExpanded = false;
                var state = 'disabled';
                if (tbody.querySelectorAll('[data-display="expanded"]').length > 0) {
                    hasExpanded = true;
                    state = 'enabled';
                }
                for (; trIndex < trLength; trIndex++) {
                    // Set all rows to disabled on click of any row
                    trs[trIndex].setAttribute('data-state', state);
                    // Reset the display of all rows
                    trs[trIndex].setAttribute('data-display', 'collapsed');
                }
                if (!hasExpanded) {
                    // Set the clicked row to active highlighted state
                    this.setAttribute('data-state', 'enabled');
                    this.setAttribute('data-display', 'expanded');
                }
            }
        );
    }

    // ===================================================================
    // =================== SORT TABLE DATA ===============================
    // ===================================================================
    // For reference:
    // this.setAttribute('data-state', this.getAttribute('data-state').contains === "enabled" ? "disabled" : "enabled");
    // Adds icon to clicked <th>
    // VanillaJS version - opted for jquery.tablesorter plugin due to flexibility and ease of use
    var thsort = tbody.querySelectorAll('th');
        //console.log(thsort);
    var sort, sortIndex = 0,
        sortlength = thsort.length;
    for (; sortIndex < sortlength; sortIndex++) {
        sort = thsort[sortIndex];
        //console.log(sort);
        // On click to sort table column, do this:
        sort.addEventListener('click',
            function() {
                var rm, rmIndex = 0;
                for (; rmIndex < sortlength; rmIndex++) {
                    rmsort = thsort[rmIndex];
                    // Remove sort icon from other <th> elements
                    rmsort.classList.remove('sort-key');
                    // Add sort icon to this <th>
                    this.classList.add('sort-key');
                    //console.log(rmsort);

                    // Conditional logic to switch asc desc label
                    var state = 'asc',
                        prevState = 'desc',
                        hasAsc, prevState;
                    if (this.classList.contains('asc')) {
                        hasAsc = true;
                        state = 'desc';
                        prevState = 'asc';
                        //console.log(prevState);
                    }
                    // Set all rows to disabled on click of any row
                    this.classList.add(state);
                    this.classList.remove(prevState);
                    //if (hasAsc) {
                    //    // Set the clicked row to active highlighted state
                    //    this.setAttribute('class', state);
                    //}
                }
            }
        );
    }
}

加载时初始化表：

var alltables = document.querySelectorAll('.table');
var thisTable, sortIndex = 0, sortlength = alltables.length;
for (; sortIndex < sortlength; sortIndex++) {
    thisTable = alltables[sortIndex];
    var tbody = thisTable.querySelector('tbody');
    configureTable(tbody);
}

正如你所看到的，如果你看的话，我并没有太大的改变。我刚刚把你的原始代码封装在一个函数块中。然后从上面偷了你的循环，找到了所有的表，因为每个表都找到了它的tbody，并调用了我们的新函数，将tbody传递给它。范围