javascript - 我如何才能针对特定表进行操作？

Question

Html page

html页面的浏览器 View :

CSS page

当我点击按钮时，我试图定位到一个特定的表格。但是我设置的功能会影响所有这些，甚至是中间的表格。我认为 table.children[0].childElementCount > 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 或类名)。

根据您的以下评论:请调查事件委托(delegate): 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>

注意绑定(bind)点击处理程序的位置。将它绑定(bind)到那里可以让您检索单元格、行或整个表体，无论按钮在哪个单元格中被单击。希望这是有道理的。