html表格嵌套表格隐藏与显示 跨行显示

最新推荐文章于 2023-03-16 16:06:38 发布
最新推荐文章于 2023-03-16 16:06:38 发布
阅读量3.4k 收藏
点赞数
分类专栏： java-html-jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongzhian/article/details/38659799
版权

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="limit" uri="http://www.yineng.com/limit"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script src="<%=path%>/js/jquery-1.6.4.min.js" type="text/javascript" ></script>
<link rel="shortcut icon" href="<%=path%>/skin/color1/images/company/favicon.ico" />
<!-- 全局样式引用  -->
<link rel="stylesheet" type="text/css" href="<%=path%>/skin/color1/css/common.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/skin/color1/css/frame.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/skin/color1/css/pageframe.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/skin/color1/css/align_style.css"/>	
<style type="text/css">
	table.table_my_style{text-align:center; margin:0px auto; border-collapse:collapse; border:solid #bbbbbb; border-width:0 0 0 0px;width:100%;}
	table.table_my_style td{border:solid #bbbbbb;border-width:0 1px 1px 0; line-height:28px; padding:0 5px; color:#595757;}
	table.table_my_style th{text-align:center; height:28px; font-weight:normal; color:#333333;border:solid #bbbbbb;border-width:0 1px 1px 0; line-height:28px;background-color:#F0F0F0;} 
</style>
</head>
<body>
	<div class='printTitle'>${stuInfoVo.stuName }学生操行项目达标情况</div>
	<h4>学生成绩毕业条件要求</h4>
	<table class="tableMainStyle" border="1" >
		<tr>
			<td colspan="2" class="left_align">${projectPassType }
				<c:if test="${itemVo.passType == 0 }">任意一个标准达标即可：<br/> </c:if>
				<c:if test="${itemVo.passType == 1 }">所有标准都要达标：<br/>  </c:if>  
			</td>
		</tr>
		<c:choose>
			<c:when test="${! empty itemVo.stuStandardVoList }">
				<c:forEach var="x" items="${itemVo.stuStandardVoList }" varStatus="obj">
					<tr> 
						<td class="left_align">
							<c:if test="${itemVo.passType != -1 }">${obj.index+1 }.</c:if> 
							${x.standardInfo }
						</td>
						<td class="center_align"> 
							<c:if test="${x.passState == '不达标'}">
								<font color="red">${x.passState}</font>
							</c:if>
							<c:if test="${x.passState != '不达标'}">
								 ${x.passState}
							</c:if>
						</td> 
					</tr>
				</c:forEach>
			</c:when>
			<c:otherwise>
				<td colspan="2" class="left_align">未给该学生所在班级设置对应的达标标准!</td>
			</c:otherwise> 
		</c:choose>
	</table>
	
	<br/>
	<h4>学生操行分</h4> 
	<table class="tableMainStyle" border="1">
		<tr>
			<th>序号</th>
			<th>学期</th>
			<th>累积加分</th>
			<th>累积加分次数</th>
			<th>累积扣分</th>
			<th>累计扣分次数</th>
			<th>操行分总分</th>
			<th>操作</th>
		</tr>
		<c:choose>
			<c:when test="${! empty BehaviorVoList }">
				<c:forEach var="x" items="${BehaviorVoList }" varStatus="obj">
					<tr> 
						<td class="center_align"> ${obj.index+1 }  </td>
						<td class="center_align">  ${x.termName } </td> 
						<td class="center_align"> 
							<c:if test="${x.behaviorAdd > 0 }">+</c:if>
						 ${x.behaviorAdd } </td> 
						 <td class="center_align">  ${x.behaviorAddCount } </td> 
						<td class="center_align">  ${x.behaviorReduce } </td> 
						<td class="center_align">  ${x.behaviorReduceCount } </td> 
						<td class="center_align">  ${x.behaviorSum } </td> 
						<td class="center_align">  
							<a href="#"   οnclick="loadStubehavior('${x.termId}',$(this));"> 展开  
							</a>
						</td>  
					</tr>
					<tr style="display: none;" id="tr_${x.termId}">
						<td id="td_148" style="margin: 0px;padding: 0px;border: 0px;width: 100%" colspan="8">
						    <table class="table_my_style">
						   		<thead>
						   			<tr>
						   				<th>序号</th>
						   				<th>类型</th>
						   				<th>考核项</th>
						   				<th>分数</th>
						   				<th>次数</th>
						   				<th>总分</th>
						   				<th>考核日期</th>
						   				<th>备注</th>
						   			</tr>
						   		</thead>
						   		<tbody>
							   <c:choose>
								     <c:when test="${! empty x.myBehaviorVoList }">
										 <c:forEach var="y" items="${x.myBehaviorVoList }" varStatus="obj1">
											<tr>
												<td class="center_align"> ${obj1.index+1 }  </td>
												<td class="center_align"> 
													<c:if test=" ${y.state == 1 }">加分项</c:if>
													<c:if test=" ${y.state == -1 }">加分项</c:if>
												 </td>
												<td class="center_align"> ${y.itemName }  </td>
												<td class="center_align"> ${y.itemScore }  </td>
												<td class="center_align"> ${y.behaviorNumber}  </td>
												<td class="center_align"> ${y.score }  </td>
												<td class="center_align">  
													<fmt:formatDate value="${y.optionDate }" pattern="yyyy-MM-dd" />
												</td>
												<td class="center_align"> ${y.remarks }  </td>
											
											</tr>
										 </c:forEach>
									 </c:when>
									 <c:otherwise>
										<tr><td colspan="8" align="center"><s:text name="nodata" /></td></tr>
									 </c:otherwise> 
							   </c:choose> 
							   </tbody>
					   		</table>
					   </td>
				   </tr>
			  </c:forEach>
			</c:when>
			<c:otherwise>
				<tr><td colspan="8" align="center"><s:text name="nodata" /></td></tr>
			</c:otherwise> 
		</c:choose>
	</table> 
	 
<script type="text/javascript">
var behavior_termId;
//加载学生的操行列表
function loadStubehavior(termId,obj){
 //显示列表页面
	var isopen = document.getElementById("tr_"+termId).style.display;
	if(isopen=="none"){
		document.getElementById("tr_"+termId).style.display="table-row";
		obj.html("折叠"); 
	}  else{ 
		 document.getElementById("tr_"+termId).style.display="none";
		 obj.html("展开");
	}
}
</script>

</body>
</html>



跨行显示 

<table class="tableMainStyle">
     <thead>
       <tr>
          <th width="60px">序号</th>
          <th>收费学期</th>
          <th>收费项目</th>
          <th>应缴金额</th>
          <th>实缴金额</th>
          <th>应缴总额</th>
          <th>实缴总额</th>
          <th>欠费金额</th>
       </tr>
     </thead>
     <tbody>
     <c:choose> 
       <c:when test="${!empty requestScope.stuPayInfoVoList}">
	        <c:forEach var="x" step="1" items="${requestScope.stuPayInfoVoList}" varStatus="status">
	          <c:forEach var="sub" step="1" items="${x.payItemDetail}" varStatus="substatus">
	          	<tr>
	          		<c:if test="${substatus.index==0}">
		          		<td align="center" rowspan="${x.payItemDetailSize}"><c:out value="${status.index+1}"/></td>
		          		<td align="center" rowspan="${x.payItemDetailSize}" ><c:out value="${x.yearname}"/></td>
	          		</c:if>
		          		<td align="center"  ><c:out value="${sub.itemName}"/></td> 
		          		<td align="center"  ><fmt:formatNumber value="${sub.requiredPay}" pattern="#0.00"/></td>
		          		<td align="center"  ><fmt:formatNumber  value="${sub.realPay}" pattern="#0.00"/></td>
	          		<c:if test="${substatus.index==0}">
		          		<td align="right" rowspan="${x.payItemDetailSize}">
		             		<fmt:formatNumber   value="${x.requiredPayTotal}" pattern="#0.00"/> 
					    </td> 
			            <td align="right" rowspan="${x.payItemDetailSize}" >
			                <fmt:formatNumber   value="${x.realPayTotal}" pattern="#0.00"/> 
			            </td>                                     
		         
		                <td align="right" rowspan="${x.payItemDetailSize}" > 
		               	    <fmt:formatNumber   value="${x.owePayTotal}" pattern="#0.00"/> 
	          	    	</td>
	          	    </c:if>
	          	</tr>
	          
	          </c:forEach> 
	        </c:forEach>
        </c:when>
        <c:otherwise>
            <tr>
               <td colspan="8" align="center"><s:text name="nodata"/></td>
            </tr>
        </c:otherwise>
      </c:choose>  
     </tbody>
  </table>


DYZA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react antd的Table组件实现鼠标移入某一行显示该行操作
谷长江的博客
09-30 5450
实现思路（基于react hook 实现） 定义一个state 值，记录当前鼠标移入行的索引 操作列使用 colume 的 render 属性自定义渲染内容，但是要给列宽，否则内容的显示隐藏会导致表格抖动，渲染内容通过对比本行索引（index）与 state 记录的索引，动态设置内容className 通过Table 的 onRow 属性，通过回调方法得到当前鼠标移入行的索引，并更新state 别墨迹，快上代码吧 import React, { memo, useCallback, useState }
antd的table实现鼠标移到某一行显示操作列的操作按钮
youlinaixu的博客
09-04 8818
实现效果如下： 代码实现： rowKey一定 <Table rowSelection={rowSelection} rowKey='id' onRow={this.onRow} rowClassName={this.setClassName} ...
一个简单的点击后显示与隐藏表格的例子
思科网络
09-01 1498
 一个简单的点击后显示与隐藏表格的例子html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>一个简单的点击后显示与隐藏表格的例子title>script type="text/j
html中使行级标签隐藏显示出来,HTML标签显示类型
weixin_39875941的博客
06-04 179
HTML标签显示类型HTML5学堂 (码匠)：依据HTML标签默认显示效果的不同，可以将HTML5标签简单的分为三大类(需要注意，在实际的分类中，并不仅仅是三类)，一类是块状元素，一类是行元素，其他的元素显示类型较多，可以统一归为一类。在各类标签当中，需要额外注意li元素，它既不属于块也不属于行(以块的方式进行展示)。HTML元素分为三大类：块状元素：网页框架基本结构块：html、body、fra...
Vue -- element-ui的table如何在鼠标划入某一行时让该行的操作按钮显示隐藏
qq_42450258的博客
06-09 3817
需求是在table中移入某一行时显示编辑按钮 使用Element中的hover事件 HTML按钮上使用显示参数和控制行参数id判断，如图示 <span v-show="showEditFileNameButton&&rowId==scope.row.id"><i class="el-icon-edit"></i ></span> js的方法 //鼠标移入单元格事件 private mouseEnter(row: any) {
Vue：element-ui中表格过长内容隐藏显示
sssxlxwbwz的博客
08-13 1万+
element-ui中表格过长内容隐藏显示及复制
treetable-很实用的树形表格带demo演示，IE模式.rar
06-17
每个表格行都可以展开或折叠，以显示或隐藏其子项，这为用户提供了更直观的浏览体验。 在压缩包中，"treetable-很实用的树形表格带demo演示"部分包含了一个实际运行的示例，开发者可以借此了解树形表格的实现原理和...
JS获取单击按钮单元格所在行的信息
10-25
这在处理表格数据、实现数据操作或者动态显示和隐藏行等功能时非常有用。 为了使这个功能更加完善，我们可以添加更多的错误检查和处理，例如确认`target`确实存在，或者确认`rowIndex`是有效的。此外，还可以扩展这...
html入门到放弃笔记
05-15
在一行内允许显示多个元素的，称为 "行内元素" span,i,b,s,u,sup,sub 作用：包裹文本，并处理文本的表现形式 2、块级元素 每个元素独占一行显示的，称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用：布局 ...
从入门到精通HTML5——PDF——网盘链接
02-27
　7.3.4　表格内文字与边框的间距 　——cellpadding 131 　7.4　设置表格背景 132 　7.4.1　表格的背景颜色——bgcolor 132 　7.4.2　表格的背景图像——background 133 　7.5　设置表格的行属性 134 　7.5.1　高度...
如何实现鼠标移入或移出使元素显示或隐藏
热门推荐
weixin_44540178的博客
05-27 2万+
开发工具与关键技术：VS HTNL CSS3 javascript jQuery 作者：Li Mingrun 撰写时间：2019年5月26日 在程序的页面中，页面可能涉及很多方面的功能，可能需要隐藏起来，当鼠标移动到特定的位置时，使其功能显示出来或已经显示的功能的剩下功能显示，当鼠标移出特定位置或区域时，使其隐藏。 例如： 1，某些网站上的购物车，当鼠标移入购物车图标时，他会显示一个框，来...
JS实现鼠标点击展开或隐藏表格行的方法
别在熬夜了！
08-18 3766
JS实现鼠标点击展开/隐藏表格行 function TestBlack(TagName){ var obj = document.getElementById(TagName); if(obj.style.display==""){ obj.style.display = "none"; }else{ obj.style.display = ""; } }
【ElementUI组件刨析】Tabs组件：使用el-table实现鼠标经过某一行时隐藏或者显示按钮
最新发布
io_123io_123的博客
03-16 2928
使用el-table实现鼠标经过某一行时隐藏或者显示按钮
实现鼠标移入移出显示隐藏元素
weixin_51780751的博客
01-21 1885
我做了两个方案： 1.css版本（利用opacity） <template> <div class="container" > <table> <thead> <tr> <th>表头</th> </tr> </thead> <tbody> <
Elementui tree实现鼠标移入显示新增按钮功能
hsany330的专栏
04-27 1991
Element tree组件鼠标移入显示新增等按钮功能的实现 实现的方法很简单，我开始使用v-show来实现，发现鼠标移入所有节点的按钮都显示了，很显然不可行，所以我就换了实现方式，使用css3来实现，思路也很简单，给父元素加上hover伪类，当鼠标移入父元素时给父元素下的按钮样式改成显示即可，话不多说直接上代码 1.首先是结构代码，完全复制element tree中自定义节点内容中的代码，在el-tree下面的第一个span加了一个类名show-hide，然后把按钮外层的span加样式让其隐藏 &lt
用javascript设置嵌套表格的显示和隐藏
一个真正靠自己的人才会懂得珍惜什么
11-24 2335
 function setdiv(divname) {    var obj = document.getElementById(divname);    if (obj.style.display == "none") {        obj.style.display = "table-row";    } else {        obj.style.display = "none"; 
表格嵌套和隐藏
dengzai8914的博客
02-20 170
问题背景：一条访问控制策略包含多条规则信息，将策略信息以列表形式显示，每行显示一条策略信息。要求鼠标点击策略信息行，显示或隐藏该策略包含的所有规则信息。 主要代码： $sql="select * from policyinfo limit $fromPage $pageSize"; $query=mysql_query($sql); //策略信息分页显示 while($re=my...
antdesign+vue额外展开行expandedRowRender全部展开，并隐藏expandIcon展开收起按钮；antdesign表格嵌套表格
Sunny_lxm的博客
01-04 4883
antdesign+vue额外展开行expandedRowRender全部展开，并隐藏expandIcon展开收起按钮
HTML表格制作：设置对齐与跨行跨列技巧
3. 创建简单表格：通过嵌套`<TD>`和`<TR>`标签来创建简单的表格，如创建一个包含移动、联通和铁通的网络服务对比表。 4. 跨行和跨列： - 跨行使用`<TD>`的`rowspan`属性，如`rowspan="3"`，表示该单元格占据三行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值