Как я смогу настроить таргетинг на конкретную таблицу, чтобы манипулировать ею?

Question

HTML-страница

Просмотр в браузере HTML-страницы:

Страница CSS

Я пытаюсь настроить таргетинг на конкретную таблицу, когда нажимаю на кнопки. Но функция, которую я настроил, влияет на все из них, даже на таблицу посередине. Я полагал, что 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'), и это вернет коллекцию всех таблиц.(вам не нужны идентификаторы или имена классов только для выбора).

На основании вашего комментария ниже: Пожалуйста, изучите делегирование события: 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>

Обратите внимание, где привязать обработчик кликов.Связывание с ним позволяет вам извлекать ячейку, строку или все тело таблицы независимо от того, в какой ячейке находится кнопка, на которую нажимают.Надеюсь, что это имеет смысл.