JSF中制作双表尾

最近，在项目中遇到一个制作表尾的问题，效果 如下：

 

 

使用的环境是IBM JSF。

  大家都知道，JSF在制作表格方面，能力是有欠缺的，尤其是在制作这种表头和表尾上，更是能力欠佳，现在好了，出来了一个表尾中有两行的问题，晕死了！

   不过，老板的意思是不可违背的，在经过不懈努力后，终于用JavaScript搞定了这个问题(直接就JavaScript开发好了，干嘛用JSF！sigh～）

  就是在表尾，使用这段代码，动态向表格中插入一行：

					var tDist;
					var tAmt;
					tDist='<h:outputText value="#{pc_JourneyDetail.totalDistance}"/>';
					tAmt='<h:outputText value="#{pc_JourneyDetail.totalAmount}"/>';

					if(true){
						var tbody=document.getElementById('_id8:tableEx1').tBodies[0];
						var tr=document.createElement('tr');

						//total
						var total=document.createElement('td');
						total.colSpan=4;
						total.className='SummaryFoot';
						var boldTxt=document.createTextNode('Total');
						total.appendChild(boldTxt);						
						tr.appendChild(total);
						
						//distance
						var dist=document.createElement('td');
						dist.className='SummaryFoot';
						var distTxt=document.createTextNode('27.2');
						dist.appendChild(distTxt);
						tr.appendChild(dist);						
						//amount
						var amt=document.createElement('td');
						amt.className='SummaryFoot';
						var amtTxt=document.createTextNode('40.68');
						amt.appendChild(amtTxt);
						tr.appendChild(amt);	
						//emptyTd
						var emptCell=document.createElement('td');
						emptCell.className='SummaryFoot';
						tr.appendChild(emptCell);
																		
						tbody.appendChild(tr);							
						
					}else{
				    	var summary='<tr ><td class="SummaryFoot" colspan="4"><b>Total</b></td><td class="SummaryFoot">'
							+<h:outputText value="#{pc_JourneyDetail.totalDistance}"/>
							+'</td><td class="SummaryFoot">'
							+<h:outputText value="#{pc_JourneyDetail.totalAmount}"/>
							+'</td><td class="SummaryFoot"></td></tr>';
						var tfootPreContent=document.getElementById('_id8:tableEx1').tFoot.innerHTML;					
						document.getElementById('_id8:tableEx1').tFoot.innerHTML=summary+tfootPreContent;
					}

 这一页的完整代码，涉及到license问题，这里就不发了。