Javascript:DOM表格操作

需求说明：

/*
*需求说明:
*获取元素：tBodies,tHead,tFoot,rows,cells
*表格的创建
*数据添加
*隔行变色
*删除操作，剩余表格重新计算，实现隔行变色
 */

HTML:

<table id="table1">
    <tbody>
    <tr>
    	<th>编号</th>
    	<th>姓名</th>
    	<th>性别</th>
    	<th>操作</th>
    </tr>

	</tbody>
</table>

CSS:

    table{
    	border:1px solid #eee;
    	border-collapse: collapse;
    }

    td,th{
		  border: 1px solid #eee;
		  padding: 12px 18px;
    }

    a{
	  text-decoration: none;
	  padding: 4px 10px;
	  color: #f8f8f8;
	  font-size: 12px;
	  border-radius: 3px;
	  letter-spacing: 2px;
	  text-shadow: 0 0 1px rgba(0,0,0,.15);
	  background-color: #eb4f38;
    }

JAVASCRIPT:

/*
*需求说明:
*获取元素：tBodies,tHead,tFoot,rows,cells
*表格的创建
*数据添加
*隔行变色
*删除操作，剩余表格重新计算，实现隔行变色
 */


/*
=========================
*tHead:表格头
*tBodies:表格正文
*tFoot：表格尾
*rows:行
* cells:列
=========================
 */
	
var oTable=document.getElementById('table1');
var oTbody=oTable.tBodies[0];
var data=[

    {'id':1,'name':'kevin1','sex':'男'},
    {'id':2,'name':'kevin2','sex':'男'},
    {'id':3,'name':'kevin3','sex':'男'},
    {'id':4,'name':'kevin4','sex':'男'},
    {'id':5,'name':'kevin5','sex':'男'},
    {'id':6,'name':'kevin6','sex':'男'}, 

];

for(var i=0;i<data.length;i++){

	var oTr=document.createElement('tr');

    /*添加id*/
	var oTd=document.createElement('td');
	oTd.innerHTML=data[i].id;
	oTr.appendChild(oTd);

	/*隔行换色*/
    
    if (i%2===0) {
    oTr.style.backgroundColor='#fff';
    }else{
    oTr.style.backgroundColor='#f8f8f8';
    }


	 /*添加name*/
	oTd=document.createElement('td');
	oTd.innerHTML=data[i].name;
	oTr.appendChild(oTd); 

	/*添加sex*/
    oTd=document.createElement('td');
	oTd.innerHTML=data[i].sex;
	oTr.appendChild(oTd); 

	/*添加操作*/
	oTd=document.createElement('td');
	/*oTd.innerHTML='删除';*/
	oTr.appendChild(oTd); 

    /*删除*/

    var oA=document.createElement('a');
    oA.innerHTML='删除';
    oA.href='javascript:';
    oA.onclick=function(){  //删除当前【行】
    oTbody.removeChild(this.parentNode.parentNode);

    //删除操作完成之后，剩余表格重新计算，实现隔行变色	
    for(var i=0;i<oTbody.rows.length;i++){

    if (i%2===0) {
    oTbody.rows[i].style.backgroundColor='#fff';
    }else{
    oTbody.rows[i].style.backgroundColor='#f8f8f8';
    }

    	}

    }

    oTd.appendChild(oA);
    oTbody.appendChild(oTr);

}

　　

在线演示：

http://codepen.io/anon/pen/BNJdBY