在js里拼接html时的一个小小细节

项目中需要在js里拼接一个table，部分代码如下：

var result = " <table style='background-color:#def2f9;' cellspacing='1'>" +
         					" <tr> " +
         						"<td>" +
         							"<table id='table_result'>";  
         result += 						"<tr>" +
         									"<th class='td' >员工号</th>" +
         									"<th class='td'>姓名</th>" +
         									"<th class='td'>部门</th>" +
         									"<th class='td'>职位</th>" +
         									"<th class='td'>技能等级</th>" +
         									"<th class='td'>联系电话</th>" +
         									"<th class='td'>籍贯</th>" +
         									"<th class='td'>现住址</th>" +
         									"<th class='td'>在职状态</th>" +
         									"<th class='td'>入职时间</th>" +
         									"<th class='td'>离职时间</th>" +
         									"<th class='td'>身份证号</th>" +
         								"</tr>";  
	         for(var i=0;i<staffViewList.length;i++) {  
	             result += "<tr id="+staffViewList[i].staff.staff_id+" οnclick='onClickShowDetail(this.id)'"+" οnmοuseοver='changeColor(this);' >";  
	             result += "<td class='td'>"+staffViewList[i].staff.staff_number+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].staff.staff_name+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].dept.dept_name+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].job.job_name+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].level.level_name+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].staff.staff_phone+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].staff.staff_nativeplace+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].staff.staff_address+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].staff.staff_state+" "+"</td>"; 
	             result += "<td class='td'>"+timeStamp2String(staffViewList[i].staff.staff_startdate.time)+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].staff.staff_enddate+" "+"</td>"; 
	             result += "<td class='td'>"+staffViewList[i].staff.staff_idcard+" "+"</td>"; 
	             
	             result += "</tr>";  
	         }  
         result += "</table></td> </tr></table>";  
         $("div_select_result").innerHTML = result; 

先看下面两句代码有什么不一样的地方

第一种：

result += "<tr id="+staffViewList[i].staff.staff_id+" οnclick='onClickShowDetail(this.id)'"+" οnmοuseοver='changeColor(this);' >"; 

第二种：

result += "<tr id="+staffViewList[i].staff.staff_id+"οnclick='onClickShowDetail(this.id)'"+"οnmοuseοver='changeColor(this);' >"; 

其中，第二种写法中的onclick和onmouseover事件是执行不出来的，原因在于方法名前少加了一个空格，这样拼接出来的html文档中方法名和前面的属性混在一起，浏览器就无法区分开来，所以当我们在拼接html时一定要想象着它们拼接出来的样子，哪怕多加一个空格 也不要少了一个空格。

最后，空格留在哪儿可以根据自己的习惯，放在某一属性前、后或者单独写成+“ ”+也可以。