2014-10-28 106 views
0

我有一個表,每個trclass="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> 
+0

所以工作example,有什麼問題了嗎? – 2014-10-28 17:46:27

+0

@AmitJoki更新。抱歉。所以專注於描述我的問題,我忘了說明。 – Liondancer 2014-10-28 17:49:13

回答

1

也許嘗試這樣的事情?

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

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

+0

我給它一個鏡頭謝謝! – Liondancer 2014-10-28 17:55:03

+0

編輯:您需要先將querySelectorAll結果轉換爲數組,然後才能使用它。 – arcyqwerty 2014-10-28 17:57:32

+0

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

1

你真的應該從事件偵聽器邏輯分離功能邏輯。

導致功能中斷的代碼部分是您在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