Question

我有一个表格，每个tr都有class="ass testPageRow"我希望能够全部选择td个标签。我目前有一些代码可以让我单独选择td。我正在尝试实现一个全选按钮。

var testPagesList = document.getElementsByClassName("testPageRow");
for (var i = 0; i < testPagesList.length; i++) {
    var testPageItems = testPagesList[i].getElementsByTagName("td");
    for (var j = 0; j < testPageItems.length; j++) {
        testPageItems[j].onclick = function(event) {
            if (this.className == "selected") {
                this.className = "unselected";
            } else {
                this.className = "selected";
            }
        };
    }
}

我的html格式

<table class="table">
<tbody>
  <tr class="ass testPageRow">
    <td id="tp1">1</td>
    <td id="tp4">4</td>
    <td id="tp5">5</td>
  </tr>

  <tr class="ass testPageRow">
    <td id="tp12">12</td>
    <td id="tp13">13</td>
    <td id="tp14">14</td>
  </tr>

  <tr class="ass testPageRow">
    <td id="tp14TTU">14TTU</td>
    <td id="tp15">15</td>
    <td id="tp16">16</td>
  </tr>

  <tr class="ass testPageRow">
    <td id="tp18">18</td>
    <td id="tp20">20</td>
    <td id="tp21">21</td>
  </tr>
</tbody>
</table>

这是我当前用于选择标签的JavaScript代码。当我点击按钮时，没有任何反应。我不确定为什么。我的逻辑是遍历所有对象并将className更改为selected，就像我之前的代码中所做的那样。

function selectAllTestPages() {
    var selectAllTP = document.getElementById("selectAllTestPages");
    selectAllTP.onclick = function(event) {
        for (var i = 0; i < testPagesList.length; i++) {
            var testPageTDTags = testPagesList[i].getElementsByTagName("td");
            for (var td in testPageTDTags) {
                td.className = "selected";
            }
        }
    };
}

按钮点击：

<div class="center">
  <button id="selectAllTestPages">Select All</button>
</div>

Answer 1

也许尝试这样的事情？

Array.prototype.slice.call(document.querySelectorAll('.testPageRow td')).forEach(function(e) {
    e.className = 'selected';
});

演示：http://jsfiddle.net/62d4La7w/

Answer 2

您应该将功能逻辑与事件侦听器逻辑分开。

导致功能中断的代码部分是您在for in变量上运行的testPageTDTags循环。您应该使用带计数器的常规循环。

这是您的代码的新版本，可以满足您的需求：

// Logic to change all tds classes to 'selected'
function selectAllTestPages() {
    var testPagesList = document.getElementsByClassName("testPageRow");
    for (var i = 0; i < testPagesList.length; i++) {
        var testPageTDTags = testPagesList[i].getElementsByTagName("td");
        for (var j = 0; j < testPageTDTags.length; j++) {
            testPageTDTags[j].className = "selected";
        }
    }
}

// Event listener that listens for button click
var button = document.getElementById('selectAllTestPages');
button.addEventListener('click', function(){
    selectAllTestPages();  
});

这里有一个关于jsfiddle的工作example

选择所有按钮以选择td标签

2 个答案: