我怎么可以遍历一些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>

回答

相关问题