Question

假设有6个th元素

    <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元素被装饰，其中一些，style =“display：none”我试图弄清楚有多少这样的装饰th元素在任意选择的左边有一个。

注意：在迭代期间可能必须增加myLimit !!

Answer 1

您可以使用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/

的实时示例

Answer 2

你可以像这样收集前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')

Answer 3

访问表中行和单元格的简单方法是使用内置属性。通常在第一行中找到标题（在你的问题中就是这种情况），所以这些是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;

Answer 4

我开始使用sandino的解决方案并使用Christophe的支票显示无风格。

关于这种情况的棘手问题是我正在使用一个kendo网格，它将网格分成两个表，一个用于标题，另一个用于主体行。如果某些列被隐藏，则这两个表可以具有不同数量的列，因为正文网格仅包含可见列，而标题网格甚至对于不可见列也具有定义。

假设网格中有12列，前7列是隐藏的。标题网格包含全部12个，前7个用display：none装饰。内容网格仅包含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;
}

我怎样才能迭代一些TH元素

4 个答案: