1

假设有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 ！！

4

4 回答 4

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/

于 2013-02-01T14:30:20.560 回答
0

您可以像这样收集前 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-01T15:13:13.970 回答
0

访问表格中的行和单元格的一种简单方法是使用内置属性。通常标题位于第一行（在您的问题中就是这种情况），因此 ths 是 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-01T16:35:45.750 回答
0

我从 Sandino 的解决方案开始，并使用 Christophe 的检查显示无样式。

这种情况的棘手之处在于我正在使用剑道网格，它将网格分成两个表格，一个用于标题，另一个用于正文行。如果某些列被隐藏，这两个表可以有不同数量的列，因为 body-grid 仅包含可见列，而 header-grid 甚至对不可见列都有定义。

假设网格中有 12 列，前 7 列是隐藏的。header-grid 包含所有 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;
}
于 2013-02-01T19:36:59.403 回答