可编辑的表格页面代码实现

有时候需要用代码编写在客户端网页中可编辑的表格以输入数据提交给后台数据库，做了一个小小的demo，效果图：

代码部分：

					
					

						
第十三届“理想杯”计算机技能大赛报名表
 
						  
						
						
 
						 	
负责人姓名
 
						    

						    
年级
						    
 
						
 
						
 
						    
电话
 
						    

						    
QQ
						    
  
						
 
						
 
						    
项目名称
 
						    
 
						
 
						
 
						    
项目类别
 
						    
 
						
 
						
 
							
小组成员
							
姓名
							

							
年级
							

						
						
 
							
							
姓名
							

							
年级
							

						
						
 
							
							
姓名
							

							
年级
							

						
						
 
						    
备注
							

						
 
						
						
 
					
				

css:

table.baoM{
	
	width: 960px;
    border-collapse:collapse; 
}
table.baoM h1{      
    text-align:left; 
    padding-bottom:6px; 
} 
table.baoM td{         
	height: 40px;
	line-height: 40px;
    margin:0px; 
    padding:0px; 
    font-family: "仿宋";
	font-size: 18px;
	text-align:center;
	line-height: 40px;
    border:1px solid #ABABAB;   
} 

table.baoM input{          /*可输入区域样式*/ 
	display: inline-block;
    width:100%;
    height: 40px;
    line-height: 40px;
    margin:0; 
    padding: 0;
    border:none; 
    background: none;   
}