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"; } } } ```