这是一个函数，当将表作为参数传递时，会对交替行应用不同的样式颜色以提高可读性。即第一行是深灰色，第二行是浅色，第三行是深灰色等。
如上所述，它作为参数传递整个表。所有行都没有 id。从这一行开始 var aTBODY = oTable.getElementsByTagName("tbody");，我明白发生了什么。也就是说，它获取表主体，然后获取其中的所有行，并交替对它们进行 strip 化。
1) 但是程序的前五行到底发生了什么？评论没有给我解释清楚。
2) 循环表长度(即 idArray.length)是否会创建行数组？ var id = idArray[indx]; 发生了什么？ ？
3)当它在注释中说，获取与此id对应的表时，使用代码var oTable = document.getElementById(id)为什么是这是必要的步骤吗？怎么了？
如果您能解释一下，谢谢
function createStripedTable(idArray) {
// for each table ID that we're given, stripe all the rows.
for (var indx = 0; indx < idArray.length; indx++) {
var id = idArray[indx];
// get the table that corresponds to this ID
var oTable = document.getElementById(id);
if (oTable == null)
return;
// get its table body, which contains all the TR tags
var aTBODY = oTable.getElementsByTagName("tbody");
// set the CSS class for each one of the TR tags
for (var i = 0; i < aTBODY.length; i++) {
// get an array of all the TR tags in the TBODY
var aTR = aTBODY[i].getElementsByTagName("tr");
for (var j = 0; j < aTR.length; j++) {
// the % operator divides the given number by another
// and returns the remainder. This is how we alternate the
// rows.
aTR[j].className = (j % 2 == 1) ? "stripe1" : "stripe2";
}
}
}
}
这是调用它的代码。
function() {createStripedTable(new Array("MSFTQuotes"))
这是通过的唯一一张表的摘录。
<body>
<table id="MSFTQuotes">
<thead>
<tr>
<th colspan="7" align="center">
<span class="TableTitle">Stock Activity for Aug 5, 2008 - Nov 5, 2008 </span>
</th>
</tr>
<tr>
<th align="center" width="14%">
<div align="right" class="style5">
Date</div>
</th>
<th align="center" width="14%">
<div align="right" class="style5">
Open</div>
</th>
<th align="center" width="14%">
<div align="right" class="style5">
High</div>
</th>
<th align="center" width="14%">
<div align="right" class="style5">
Low</div>
</th>
<th align="center" width="14%">
<div align="right" class="style5">
Close</div>
</th>
<th align="center" width="14%">
<div align="right" class="style5">
Volume</div>
</th>
<th align="center" width="14%">
<div align="right" class="style5">
Adj Close</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">
5-Nov-08
</td>
<td align="right">
29.21
</td>
<td align="right">
29.36
</td>
<td align="right">
29.03
</td>
<td align="right">
29.31
</td>
<td align="right">
95,337,696
</td>
<td align="right">
29.31
</td>
最佳答案
该函数接受与 table 元素相对应的 id 值数组。它循环遍历这些 ID，并对表中的所有 tbody 元素执行 strip 化工作。
更多注释(请参阅TJC:s):
function createStripedTable(idArray) {
// for each table ID that we're given, stripe all the rows.
// TJC: Loop through all of the IDs in the given array
for (var indx = 0; indx < idArray.length; indx++) {
// TJC: Get the ID value for index `indx` in the array
var id = idArray[indx];
// get the table that corresponds to this ID
var oTable = document.getElementById(id);
if (oTable == null) // TJC: Invalid ID, ignore it
return;
// get its table body, which contains all the TR tags
// TJC: Get the `tbody`s under the table. One table
// can have multiple `tbody` elements.
var aTBODY = oTable.getElementsByTagName("tbody");
// set the CSS class for each one of the TR tags
for (var i = 0; i < aTBODY.length; i++) {
// get an array of all the TR tags in the TBODY
// TJC: It's actually a NodeList, but you can largely
// treat it as an array
var aTR = aTBODY[i].getElementsByTagName("tr");
for (var j = 0; j < aTR.length; j++) {
// the % operator divides the given number by another
// and returns the remainder. This is how we alternate the
// rows.
aTR[j].className = (j % 2 == 1) ? "stripe1" : "stripe2";
}
}
}
}
好消息是IE9 finally supports nth-child pseudo-class ，所以有一天您将能够停止使用代码执行此操作。
关于JavaScript——读取表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5498785/