web table 跨行循环处理实例

最新推荐文章于 2024-08-09 15:13:41 发布

xueshandugu

最新推荐文章于 2024-08-09 15:13:41 发布

阅读量1.2k

点赞数

分类专栏： Jquery 实用小功能

本文链接：https://blog.csdn.net/xueshandugu/article/details/35275977

版权

Jquery 实用小功能专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先看效果：

关键代码：

<span style="font-size:18px;">    <div id="tableWrap" class="tableWrap">
    	<div id="fixTableHeadWrap" class="fixTableHeadWrap">
            <table id="fixTableHead" class="fixTableHead table" width="100%">
                <tr bgcolor="#f6f8fa" height="35">
                    <th width="30%">烟叶名称</th>
                    <th width="30%">原烟产地</th>
                    <th width="25%">原烟等级</th>
                    <td width="15%">操作</td>
                </tr>
            </table>
        </div>
    	<div id="fixTableBodyWrap" class="fixTableBodyWrap">
        	<table id="fixTableBody" class="table" width="100%">
                <tr height="35">
                    <td width="30%">烟叶名称</td>
                    <th width="30%">原烟产地</th>
                    <th width="25%">原烟等级</th>
                    <td width="15%">操作</td>
                </tr>
                <!-- outer loop start -->
               <c:forEach var="mp" items="${mainList}">
	                 <!-- inner loop start -->
	               <c:forEach var="sp" items="${mp.cbList}"  varStatus="status">              
		                <tr data-zbdm="${mp.zbdm}">
		                <c:if test="${status.index  == 0 }">
		                    <td width="30%" rowspan="${fn:length(mp.cbList)}">${mp.cdmc}   ${mp.djmc}</td>
		                </c:if> 
			                <c:if test="${status.index % 2  == 1 }">
			                    <td bgcolor="#f6f8fa" align="left" style="padding-left:30px;">${sp.cdmc}</td>
			                    <td bgcolor="#f6f8fa">${sp.djmc}</td>		                
			                </c:if>
			                <c:if test="${status.index % 2  == 0 }">
			                    <td align="left" style="padding-left:30px;">${sp.cdmc}</td>
			                    <td>${sp.djmc}</td>		                
			                </c:if>		                
		                <c:if test="${status.index  == 0 }">
		                    <td rowspan="${fn:length(mp.cbList)}"><button data-zbdm="${mp.zbdm}" class="button delete">删除 </button></td>
		                </c:if>
		                </tr>
		            </c:forEach>  
	            	<!-- inner loop end -->     
               </c:forEach>
               	<!-- outer loop end -->
               	
               	<!-- no data -->
               	<c:if test="${fn:length(mainList) == 0}">
               		<tr><td colspan="4">对不起，没有数据！</td></tr>
               	</c:if>                
            </table>
        </div></span>

关键点解析：

1：fixTableHeadWrap 是为了实现一个仿 excel 冻结首行的效果；

2:  .... ... 为循环部分，也是本文重点；

注意：此处引用了 jstl, 来做循环

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

课外拓展：

///课外拓展 start

<span style="font-size:18px;"><html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html></span>

结果：