Question

html页面的浏览器视图：

我单击按钮时尝试定位特定的表格。但是我设置的功能影响了所有这些功能，甚至是中间的表格。我想了table.children [0] .childElementCount＆gt; 10只会影响第一个和第三个表，因为那个行有10行以上。是否有人知道如何定位一个有10行以上的单个表？

如果我的问题有意义，如果我需要提供更多信息，请告诉我。

的Javascript

/* ==========================================================================
                    ShowDebug constructor
========================================================================== */

var ShowDebug = function () {
this.tables = document.querySelectorAll('.tbl_List');

this.counters = {
    min: 1,
    max: 5
}

this.rule = document.styleSheets[0].rules[0]
this.appendElements();
}

/* ==========================================================================
                   ShowDebug Inherited methods
  ========================================================================== */

ShowDebug.prototype = {
// Create button to collopase table items
createLessBtn() {
    var lessBtn = document.createElement("button");
    lessBtn.className = "btn";
    lessBtn.textContent = "Less";
    lessBtn.setAttribute("onclick", "showDebug.showLess();");
    return lessBtn
},

// Create button to expand table items
createMoreBtn() {
    var moreBtn = document.createElement("button");
    moreBtn.className = "btn";
    moreBtn.textContent = "More";
    moreBtn.setAttribute("onclick", "showDebug.showMore();");
    return moreBtn
},

// Append elements to the tables
appendElements() {

    console.log(document.styleSheets[0].rules[0])

    this.tables.forEach(function (table) {
        if (table.children[0].childElementCount > 10) {
            let itemCounter = document.createElement('span')
            itemCounter.className = "item-counter"
            itemCounter.innerHTML = ` 1 - 10 of ${table.children[0].childElementCount} items`
            table.children[0].appendChild(itemCounter);
            table.children[0].appendChild(this.createLessBtn());
            table.children[0].appendChild(this.createMoreBtn());


        }
    }, this)
},

// Collaspe table items
showLess() {
    this.tables.forEach(function (table, index) {
        if (table.children[0].childElementCount > 10) {

            if (index === 0) {
                console.log("less");
                showDebug.counters.max = showDebug.counters.max - 5;
                showDebug.rule.selectorText = "table tr:nth-of-type(" + showDebug.counters.min + "n+" + showDebug.counters.max + ")";
            }


        }
    })
},

// Expand table items
showMore() {
    this.tables.forEach(function (table, index) {
        if (table.children[0].childElementCount > 10) {

            if (index === 0) {
                console.log("more");
                showDebug.counters.max = showDebug.counters.max + 5;
                showDebug.rule.selectorText = "table tr:nth-of-type(" + showDebug.counters.min + "n+" + showDebug.counters.max + ")";
            }

        }
    })
}

 }

 var showDebug = new ShowDebug();

CSS

table tr:nth-of-type(1n+5) {
display: none;
}

table {
width: 100%;
}

/* .hide:nth-of-type(1n+1) {
display: none;
background: red;
} */

Answer 1

.querySelectorAll()将创建一个集合（如您所知）。但是，由于您使用其id属性选择了一个表，因此只有一个表。 HTML id属性在页面上必须是唯一的。因此，.querySelector()是正确的解决方案。

更改

document.querySelectorAll('#tbl_List');

要

document.querySelector('#tbl_List');

然后，重构以删除forEach()循环。只有一个表而不是NodeList。

修改

您应该知道有几种方法可以收集所有表格。您可以使用document.querySelectorAll('table')，这将返回所有表的集合。（您不需要ID或类名仅供选择）。

根据您的评论如下：请调查事件授权： https://davidwalsh.name/event-delegate

给出一张表：

<table> <thead> <tr><th></th><th></th></tr> <thead> <tbody> /** <-- BIND YOUR CLICK HANDLER HERE !!!! **/ <tr><td></td><td><button>Less</button><button>More</button></td></tr> <tr><td></td><td><button>Less</button><button>More</button></td></tr> <tr><td></td><td><button>Less</button><button>More</button></td></tr> <tr><td></td><td><button>Less</button><button>More</button></td></tr> </tbody> </table>

请注意绑定点击处理程序的位置。将其绑定在那里允许您检索单元格，行或整个表体，无论单击按钮所在的单元格。希望这是有道理的。

我如何能够定位特定的表来操纵它？

1 个答案: