我怎麼可以遍歷一些TH元素的<thead><tr>

比方說，有6個th元素我怎麼可以遍歷一些TH元素的<thead><tr>

<thead> 
     <tr><th></th><th></th><th></th> <th></th><th></th><th></th></tr> 
    </thead>

，我想遍歷只有第4。如何獲取這些元素的迭代列表，以便我可以做這樣的事情：

while (i < myLimit) { 
      th = thlist[i]; 
      // do something : if somecondition myLimit +=1; 
      i++; 
    } 
    return i;

的th元素進行裝飾，一些的，風格=「顯示：無」，我想找出有多少這樣裝飾的元素在任意選擇的元素的左邊。

注意：myLimit可能不得不在迭代過程中增加！

來源

2013-02-01 Tim

您可以使用getElementByTagName JavaScript的純函數，就像這樣：

function getStyle(elem, cssprop, cssprop2){ 
// IE 
if (elem.currentStyle) { 
    return elem.currentStyle[cssprop]; 

// other browsers 
} else if (document.defaultView && 
        document.defaultView.getComputedStyle) { 
    return document.defaultView.getComputedStyle(elem, 
null).getPropertyValue(cssprop2); 

// fallback 
} else { 
    return null; 
} 
} 


var ths = document.getElementsByTagName('th'); 
var myLimit = 4; 

var max = ths.length; 

if (myLimit>max) 
    myLimit = max; 

for (var i = 0;i < myLimit; i++) { 
    // do something with myarray[i] 
    var th = ths[i]; 
    if (getStyle(th,'display','display')=='none') 
     alert('th in position '+i+' is decorated with display:none'); 
}

這裏是一個活生生的例子工作http://jsfiddle.net/aJ8MS/

來源

2013-02-01 14:30:20 sandino

這個迭代 – Simon

正確的改變了我的 sandino

@sandino所有6個元素：感謝您的DOM功能和代碼來獲取樣式。很有幫助。 – Tim

您可以收集第4（或n）的元素是這樣的：

var limit = 4, 
    $ths = $('th:not(:nth-child('+limit+') ~ th)', 'thead');

然後使用.each（）例如迭代：

$ths.each(function() { 
    console.log(this); 
});

jsfiddle

或另一種方法：

var limit = 4, 
    $ths = $('th', 'thead'); 

$ths.each(function() { 
    var id = $(this).index(); 
    if(id < limit) { 
     console.log(this); 
     // increase limit on certain condition 
     if(id == 2) limit++; 
    } 
}); 

return limit;

jsfiddle

要檢查元素是否具有display: none簡單：

$this.is(':hidden')

來源

2013-02-01 15:13:13 Simon

很好的答案，但最初問一個非jquery解決方案的問題是一個JavaScript純粹的解決方案 – sandino

他在哪裏尋求非jquery解決方案？此外，這個問題是用jQuery來標記的。 – Simon

他編輯的答案，也許他切斷了該段落，對不起：O – sandino

一個簡單的方法來訪問行和單元格一個表是使用內置的屬性秒。通常情況下，標頭中的第一行（這是你的問題的情況下）中發現的，因此，部份是包含在table.rows [0]細胞：

var table=document.getElementById("myTable"), 
    i=0, 
    count=0, 
    myLimit=4; 
while (i < myLimit) { 
    if (table.rows[0].cells[i].style.display=="none") { count ++; } 
    i++; 
} 
return count;

來源

2013-02-01 16:35:45 Christophe

我開始與桑地諾的解決方案和使用克里斯托夫的檢查爲顯示無風格。

這種情況下的技巧就是我使用了一個kendo網格，它將網格分成兩個表格，一個用於表頭，另一個用於主體行。如果隱藏了某些列，則這兩個表可以具有不同的列數，因爲主體網格僅包含可見列，而標題網格即使對於不可見列也具有定義。

假設網格中有12列，前7個隱藏。標題網格包含全部12個，前7個用顯示裝飾：無。內容網格僅包含5個可見列。因此，當用戶點擊第一個可見列時，索引0，它實際上對應於標題網格中的第8列（基於0，因此索引= 7）。

要找到與VisibleIndex 0相對應的列標題，我們必須向點擊單元格的索引添加左側隱藏列的數量。我們增加7比0拿到了7

function countHiddenColumnHeadersLeft(id, clickedCellIndex) {  
    var ths = document.getElementById(id).getElementsByClassName('k-header'); 
    var myLimit = clickedCellIndex; 


    var invisicount = 0; 

    for (var i = 0; (i < myLimit) ; i++) {   
     var th = ths[i]; 
     if (th.style.display == 'none') { 
      invisicount++; 
      myLimit++; 
     }   
    } 
    return invisicount; 
}

來源

2013-02-01 19:36:59 Tim

我怎麼可以遍歷一些TH元素的<thead><tr>

回答

相關問題