table SpanRow

最新推荐文章于 2024-03-11 16:38:18 发布

原创最新推荐文章于 2024-03-11 16:38:18 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#J# #JavaScript #JSP #ViewUI

Js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现表格单元格合并的方法，该方法能够自动检测并合并相同内容的单元格，提高表格阅读效率。通过具体示例展示了如何在HTML表格中应用此JS函数。

js:

function SpanGrid(tabObj,colIndex)
{
	if(tabObj != null)
	{
		var i,j;
		var intSpan;
		var strTemp;
		for(i = 0; i < tabObj.rows.length; i++)
		{
			intSpan = 1;
			strTemp = tabObj.rows[i].cells[colIndex].innerText;
		    for(j = i + 1; j < tabObj.rows.length; j++)
		    {
		        if(strTemp == tabObj.rows[j].cells[colIndex].innerText)
		        {
			        intSpan++;
			        tabObj.rows[i].cells[colIndex].rowSpan = intSpan;
			        tabObj.rows[j].cells[colIndex].style.display = "none";
		        }
			    else
			    {
			    	break;
			    }
		  	}
		  	i = j - 1;
		}
	}
}

jsp:

<table border="1"  cellspacing ="0" cellpadding="2"  bgcolor="white" WIDTH="90%"  align="center" id="tabForecast">
			<tr HEIGHT="15px" class="clsTabHead1">
				<th WIDTH="10%" ALIGN="CENTER" >PARENT_COMP_NAME</th>
				<th WIDTH="50%" ALIGN="CENTER" >PARENT_COMP_MGR</th>					
				<th WIDTH="50%" ALIGN="CENTER" >CHILD_COMPONENT</th>
				<th WIDTH="50%" ALIGN="CENTER" >CHILD_COMP_NAME</th>
				<th WIDTH="10%" ALIGN="CENTER" >CHILD_COMP_MGR</th>
				<th WIDTH="10%" ALIGN="CENTER" >SEC_CATEGORY</th>
				<th WIDTH="10%" ALIGN="CENTER" >CATEGORY</th>
				<th WIDTH="10%" ALIGN="CENTER" >EMP_TYPE</th>
				<th WIDTH="10%" ALIGN="CENTER" >EMPLOYEE_NUMBER</th>
				<th WIDTH="10%" ALIGN="CENTER" >EMPLOYEE_NAME</th>
				<th WIDTH="5%" ALIGN="CENTER" >JAN Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >FEB Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >MAR Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >APR Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >MAY Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >JUN Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >JUL Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >AUG Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >SEP Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >OCT Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >NOV Head Count</th>
				<th WIDTH="5%" ALIGN="CENTER" >DEC Head Count</th>
			</tr>
		<a4j:repeat id="plrepeat" value="#{reportsBean.lstHtmlReport}"
								var="lrsReport" rowKeyVar="intSize" >
			<tr>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.parentCompName}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.parentCompMgr}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.childComponent}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.childCompName}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.childCompMgr}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.secCategory}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.category}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.empType}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.employeeNumber}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.employeeName}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.jan}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.feb}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.mar}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.apr}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.may}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.jun}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.jul}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.aug}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.sep}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.oct}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.nov}"/></td>
			<td class="clsEvenRows1" ALIGN="CENTER"><h:outputText value="#{lrsReport.dec}"/></td>
			</tr>
			</a4j:repeat>
		</table>
<SCRIPT LANGUAGE="JavaScript">
	loadingimage.style.display = "none";
	
	document.onreadystatechange = function () {   
       if(document.readyState=="complete") {          
            SpanGrid(tabForecast,0);
            SpanGrid(tabForecast,1);
            SpanGrid(tabForecast,2);
            SpanGrid(tabForecast,3);
            SpanGrid(tabForecast,4);
            SpanGrid(tabForecast,5);
            SpanGrid(tabForecast,6);
            SpanGrid(tabForecast,7);
            SpanGrid(tabForecast,8);
        }   
    } 
</SCRIPT>