DOM操作--表格的相关操作

1、表格隔行变色：

window.onload = function(){//tab1是表格的idvar oTab = document.getElementById('tab1');//隔行变色for(var i = 0; i < oTab.tBodies[0].rows.length; i++){if(i % 2 ){oTab.tBodies[0].rows[i].style.background = '';}else{oTab.tBodies[0].rows[i].style.background = '#ccc';}}}

2、表格中鼠标移入移出：

需要注意的是，当我们把鼠标移入的时候，应该先读取一下当前行的表格的颜色，以便当鼠标移出的时候的转为原先的颜色；

//存取原本（隔行变色）的颜色
oldColor = this.style.background;

window.onload = function(){//tab1是表格的idvar oTab = document.getElementById('tab1');//隔行变色for(var i = 0; i < oTab.tBodies[0].rows.length; i++){//鼠标移入，整行高亮显示oTab.tBodies[0].rows[i].onmouseover = function(){//存取原本（隔行变色）的颜色oldColor = this.style.background;this.style.background = '#00dd00';};//鼠标移出，退回原本的颜色oTab.tBodies[0].rows[i].onmouseout = function(){this.style.background = oldColor;}if(i % 2 ){oTab.tBodies[0].rows[i].style.background = '';}else{oTab.tBodies[0].rows[i].style.background = '#ccc';}}}

3、表格的添加

姓名：<input type="text" id="name"></input>
年龄：<input type="text" id="age"></input>
<button id="btn1">添加</button>

var oBtn = document.getElementById('btn1');var oName = document.getElementById('name');var oAge = document.getElementById('age');oBtn.onclick = function(){var oTr = document.createElement('tr');//添加idvar oTd = document.createElement('td');oTd.innerHTML = oTab.tBodies[0].rows.length;oTr.appendChild(oTd);//添加名字var oTd = document.createElement('td');oTd.innerHTML = oName.value;oTr.appendChild(oTd);//添加年龄var oTd = document.createElement('td');oTd.innerHTML = oAge.value;oTr.appendChild(oTd);oTab.tBodies[0].appendChild(oTr);}