JavaScript(10)：结构、样式、行为的逐步分离

　　最开始实现某一项功能的时候，结构、样式和行为是混在一起的。

　　本来写代码就是为了让自己和别人看明白，这样做的缺点很明显，不方便查看和修改。

　　1、结构、样式、行为不分离

　　所有的浏览器都支持这样的写法。例如下面的网页，表格内的奇数行和偶数行有不同的样式，类似斑马线，同时鼠标在不同的行上移入和移出对应的行有不同的样式表现，点击删除按钮有删除表格行的功能。

    
    
    JavaScript->JavaScript事件代理


  

    学生成绩表
    
        
            学号
            姓名
            语文
            数学
            平均分
            操作			
        		
        
            101
            小明
            81.5
            87
            84.25
            删除			
        
        
            102
            小黄
            61
            47.5
            54.25
            删除			
        
        
            103
            小丽
            89
            83
            86
            删除			
        
        
            104
            小宋
            56
            97
            76.5
            删除			
        								
        
            105
            小王
            82
            73
            77.5
            删除			
        
        
            106
            小李
            31
            63
            47
            删除			
        
        
            107
            小华
            49
            83
            66
            删除			
        						
            
  



    function funcMouseenter(obj){
        obj.style="line-height: 200%;background-color: #999;color:#d70008;text-align: center";
    }
    function funcMouseout(obj){
        var studentID=obj.cells[0].innerHTML;        
        if(parseInt(studentID)%2==0){
                obj.style="line-height: 200%;background-color: #efefef;color: rgb(8, 8, 8);text-align: center;"
        }else{
                obj.style="line-height: 200%;background-color: #f8f8f8;color: rgb(128, 128, 128);text-align: center;"
        }
    }
	function del(obj){		
		 var tr = obj.parentNode.parentNode;
		 var studentID=tr.cells[0].innerHTML;
		 var flag = confirm("确认删除学号为" + studentID + "记录吗?");
                if(flag) {//确认删除
					//从数据库中删除学号为studentID
					//delFromDB
                    tr.parentNode.removeChild(tr);//删除tr
                }
		 // console.log(studentID);
		 //return false
		 //如果这个删除命令是通过点击超级链接来的，那么超级链接的默认行为是跳转页面，如果不希望跳转，那么return false就可以取消默认行为
	}
  

　　结果图：

 　　2、使用JavaScript完成样式和行为

　　将样式从网页结构中剥离出来，使用JavaScript代码来完成，这样稍微改进了一下网页结构和样式的组织方式。

    
    
    JavaScript->JavaScript事件代理


  

    学生成绩表
    
        
            学号
            姓名
            语文
            数学
            平均分
            操作			
        		
        
            101
            小明
            81.5
            87
            84.25
            删除			
        
        
            102
            小黄
            61
            47.5
            54.25
            删除			
        
        
            103
            小丽
            89
            83
            86
            删除			
        
        
            104
            小宋
            56
            97
            76.5
            删除			
        								
        
            105
            小王
            82
            73
            77.5
            删除			
        
        
            106
            小李
            31
            63
            47
            删除			
        
        
            107
            小华
            49
            83
            66
            删除			
        						
            
  



	function init(){
		//设置表格的行和列的样式
		var tableObj = document.getElementById("studentTable");
		for (var i = 1; i < tableObj.rows.length; i++) {  //遍历表格的所有行，表头除外；表头为0
			// studentId=tableObj.rows[i].cells[0].innerText;//获取学号
			tableObj.rows[i].onmouseenter=function(){this.style="line-height: 200%;background-color: #999;color:#d70008;text-align: center";};
			tableObj.rows[i].onmouseout=function(){ funcMouseout(this); };

			if(parseInt(i)%2==0){
				//偶数行
				tableObj.rows[i].style="line-height: 200%;background-color: #efefef;color: rgb(8, 8, 8);text-align: center";
			}else{
				//奇数行
				tableObj.rows[i].style="line-height: 200%;background-color: #f8f8f8;color: rgb(128, 128, 128);text-align: center";
			}
			//获得按钮
			// var btn=tableObj.rows[i].cells[5].innerHTML;
			// console.log(btn);
			// btn.onclick=function(){ console.log("删除"); };			
			for (var j = 0; j < tableObj.rows[i].cells.length; j++) {  //遍历Row中的每一列
				tableObj.rows[i].cells[j].style="width: 100px;";
			}
		}
		
		var btn=document.getElementsByTagName('button');
		for(var i=0;i