假设有 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 可能必须在迭代期间增加！！
【问题讨论】：
标签： javascript loops html-table columnheader
您可以使用 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/
【讨论】：
element.getAttribute('display')（它是纯JS）来简化获取样式的过程吗？我知道如果它是通过 CSS 设置的，你也可以通过函数获得样式，但在我看来 getAttribute 在这里就足够了。
访问表格中的行和单元格的一种简单方法是使用内置属性。通常标题位于第一行（在您的问题中就是这种情况），因此 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;
【讨论】：
我从 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;
}
【讨论】：
您可以像这样收集前 4 个（或 n 个）元素：
var limit = 4,
$ths = $('th:not(:nth-child('+limit+') ~ th)', 'thead');
然后使用 .each() 进行迭代：
$ths.each(function() {
console.log(this);
});
或其他方法：
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;
简单地检查一个元素是否有display: none：
$this.is(':hidden')
【讨论】：