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

问题描述：

我有一个表，每个tr有class="ass testPageRow"我希望能够全部选择td标签。我目前有一些代码允许我单独选择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>

所以工作example，有什么问题了吗？ – 2014-10-28 17:46:27

@AmitJoki更新。抱歉。所以专注于描述我的问题，我忘了说明。 – Liondancer 2014-10-28 17:49:13

答

也许尝试这样的事情？

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

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

我给它一个镜头谢谢！ – Liondancer 2014-10-28 17:55:03

编辑：您需要先将querySelectorAll结果转换为数组，然后才能使用它。 – arcyqwerty 2014-10-28 17:57:32

没有工作= [ – Liondancer 2014-10-28 18:01:46

答

你真的应该从事件侦听器逻辑分离功能逻辑。

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

这是你的代码的新版本，这将使你在找什么：

// 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

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

相关推荐