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