// 當(dāng)文件加載時，執(zhí)行代碼。
window.onload = function() {
 // 獲取<ul id="list" />對象
 var list = document.getElementById('list');
 // 獲取list下面的所有l(wèi)i
 var items = list.getElementsByTagName('li');
 // 遍歷items
 for (var i = 0; i < items.length; i++) {
  var className = (i % 2 == 0) ? ' odd' : ' even';
  items[i].className += className; 
 }
}

/**
 * 此方法用于列表的隔行變色效果，可以靈活得為指定ID的列表指定隔行的顏色。
 *
 * @param id 列表的id
 * @param item 要變色的行的標簽
 * @param odd 奇數(shù)行的樣式類名，如果不指定，則默認為odd
 * @param even 偶數(shù)行的樣式類名，如果不指定，則默認為even
 * @param start 開始變色的行的索引，如果不指定，則默認為0
 * @param end 結(jié)束變色的行的索引，如果不指定，則默認為列表長度
 */
function rowRender(id, item, odd, even, start, end) {
 // 獲取列表容器
 var list = document.getElementById(id);
 // 獲取列表
 var items = list.getElementsByTagName(item);
 
 // 修正初始位置，如果不是一個數(shù)字或者越界，則從0開始
 if (isNaN(start) || (start < 0 || start >= items.length)) {
  start = 0;
 }
 
 // 修正結(jié)束位置，如果不是一個數(shù)字或者越界，則為列表末尾
 if (isNaN(end) || (end < start || end >= items.length)) {
  end = items.length;
 }
 
 // 如果沒有指定odd，則默認為'odd'
 odd = odd || 'odd';
 // 如果沒有指定even, 則默認為'even'
 even = even || 'even'; 
 
 // 遍歷列表并渲染效果
 for (var i = start; i < end; i++) {
  var className = ' ' + ((i % 2 == 0) ? odd : even);
  items[i].className += className;
 }
}

window.onload = function() {
 // 渲梁list1下所有的li標簽，使用默認的樣式和起始位置
 rowRender('list1', 'li');

 // 渲梁list2下所有的li標簽，使用指定的odd和默認的even，使用指定的起始位置
 rowRender('list2', 'li', 'odd1', null, 2, 6);

 // 渲梁table1下所有的tr標簽，使用指定的odd和even，使用默認的起始位置
 rowRender('table1', 'tr', 'tr-odd', 'tr-even');
 // 渲梁table2下所有的tr標簽，使用指定的odd和even，使用指定的起始位置
 rowRender('table2', 'tr', 'tr-odd', 'tr-even', 1);
}

rowRender('table1', 'tr', 'tr-odd', 'tr-even');

rowRender('table1', 'tr', 'tr-odd', 'tr-even', 1);