1. 列表隔行变色 ``` 1. nth-child(odd) 奇数项 2. nth-child(even) 偶数项 3. js for循环 ``` 2. 表格隔行变色 tHead 获取thead部分 tBodies 获取tBody部分，获取的是一个类数组 rows 获取tr的集合 ``` var table = document.getElementById("table"); table.tHead.style.background = "#ff2d51"; var rows = table.tBodies[0].rows; for(var i=0; i<rows.length;i++){ if(i%2==0){ rows[i].style.background = "#eee"; }else{ rows[i].style.background = "#333"; } } ``` 3. 动态添加表格 ``` var table = document.getElementById("table"); table.tHead.style.background = "#ff2d51"; var rows = table.tBodies[0].rows; for(var i=0; i<rows.length;i++){ if(i%2==0){ rows[i].style.background = "#eee"; }else{ rows[i].style.background = "pink"; } } var shop = document.getElementById("shop"); var cell = document.getElementById("cell"); var add = document.getElementById("add"); add.onclick = function(){ var shopValue = shop.value; //获取input中的value值 var cellValue = cell.value; var tr = document.createElement("tr"); //生成tr var td = document.createElement("td"); //生成td var td1 = document.createElement("td"); td.innerHTML = shopValue; //将value值添加到td中 td1.innerHTML = cellValue; tr.appendChild(td); //将td添加到tr中 tr.appendChild(td1); table.tBodies[0].appendChild(tr); //将tr添加到tBodies[0]中 for(var i=0; i<rows.length;i++){ if(i%2==0){ rows[i].style.background = "#eee"; }else{ rows[i].style.background = "pink"; } } } ```