js方式锁定表头

梦里梦外; 2022-08-27 14:47 127阅读 0赞

**js方式锁定表头**

js代码修改版：

css代码：

table代码：

<pre name="code" class="html"><table
    
        style=" width:  ${fn:length(rs[1])*50+300 };height: ${fn:length(rs[2])*25+60 }; color: #000000;  font-size: medium; "
        id="MyTable"
        cellspacing="0"
        cellpadding="0"
    >
    <thead>
        <tr style="height:30px;">
    	
            <th style="text-align: center; width: 100px;border-bottom:1px solid #000;border-left:1px solid #000000;" rowspan="2">
                地区
            </th>
            <th style="text-align: center; width: 40px;border-bottom:1px solid #000;" rowspan="2">
                序号
            </th>
            <th style="text-align: center; width: 160px;border-bottom:1px solid #000;" rowspan="2">
                零售点
            </th>
    	//这里可以写模拟数据，生成表头
            <c:forEach items="${rs[0]}" var="r" varStatus="sta">
            	<c:if test="${sta.index==0}">
    			        <th style="text-align: center;" colspan="${r['SUM'] }">
    			            ${r['PPMC'] }
    			        </th>
        			</c:if>
        			<c:if test="${sta.index!=0}">
    			        <th style="text-align: center;" colspan="${r['SUM'] }">
    			            ${r['PPMC'] }
    			        </th>
        			</c:if>
    	        
            </c:forEach>
            
            
        </tr>
      
        <tr style="height:30px;">
    	// 这里可以写模拟数据，生成表头
        	<c:forEach items="${rs[1]}" var="r" varStatus="sta">
        		
        			<c:if test="${sta.index==0}">
    			        <th style="text-align: center; width: 50px;border-bottom:1px solid #000;">
    			           ${r['GGJC'] }
    			        </th>
        			</c:if>
        			<c:if test="${sta.index!=0}">
    			        <th style="text-align: center; width: 50px;border-bottom:1px solid #000;">
    			           ${r['GGJC'] }
    			        </th>
        			</c:if>
    		   
        	</c:forEach>
            
        </tr>
        
    </thead>
        <tbody>
    
        
        	
        	<c:set value="${rs[3]}" var="csCnt"></c:set>
        	<c:set value="0" var="csbs"></c:set>
        	<c:set value="1" var="i"></c:set>
            <c:forEach items="${rs[2]}" var="r" varStatus="s">
            
            <tr style="height:25px;">
            	<c:if test="${csbs==0 || csbs!=r['CSBS']}">
                <td class="left" style="border-left:1px solid #000;background-color:white;" rowspan="${csCnt[r['CSBS']] }">
                    ${r['CSMC'] }
                </td>
                </c:if>
            	
    	       <c:if test="${csbs==0 || csbs!=r['CSBS']}">
                	<c:set value="1" var="i"></c:set>
                	<td class="left" style="background-color:white;">
                    	${i }
                	</td>
                	
                	<c:set value="${i+1}" var="i"></c:set>
                </c:if>
            	<c:if test="${csbs==r['CSBS']}">
                <td class="left" style="background-color:white;">
                    ${i }
                </td>
    	        	<c:set value="${i+1}" var="i"></c:set>
                </c:if>
                <td class="left" style="background-color:white;">
                    	<c:if test="${r['LSDMC']=='' || r['LSDMC']==null}">
                    		--
                    	</c:if>
                    	<c:if test="${r['LSDMC']!='' && r['LSDMC']!=null}">
                    		${r['LSDMC']}
                    	</c:if>
                    	
                </td>
            	<c:set value="${r['CSBS'] }" var="csbs"></c:set>
            	
                
            	<c:set value="${rs[4][r['LSDBS']] }" var="rData"></c:set>
                <c:forEach items="${rs[1]}" var="v" varStatus="ss">    
    	            	
    	            		<td  class="data">
    	            	
    	            	<c:if test="${rData[v['GGBS']]==null ||rData[v['GGBS']]=='' }">
    	            		--
    	            		
    	            	</c:if>
    	            	<c:if test="${rData[v['GGBS']]!=null && rData[v['GGBS']]!='' }">
    	            		
    		            		<fmt:formatNumber pattern="#,###.0">
    			            		${rData[v['GGBS']] }
    		            		</fmt:formatNumber>
    	            	</c:if>
    	            		</td>
    	            
                </c:forEach>
                
            </tr>
            </c:forEach>
                    
        </tbody>
    </table>

这里需要注意的是，左边栏最右边的边框线可能会没有，在js代码中有一句

ColumnsWidth+=1;//左边栏最右侧边框1像素，不加则没有边框

这句话可以解决border为1px的线，一般都是1像素，如果多了自己加。