在我的表格中，每行前面都有一个“隐藏”按钮。当你想要从表中隐藏一行时，你点击你需要隐藏的行上的按钮。当它被点击时，该行被隐藏，按钮变为“显示”按钮，所以如果你想要你可以在你的表中再次获得该数据。
按钮的HTML代码段
<button class="hide" id="hiding" type="button" value="Hide">Hide</button>
<button class="show" id="showing" type="button" value="Show" style="display:none;">Show</button>
此函数的jquery代码段
$(document).ready(function() {
$(function(){
$(".hide").on('click', function(){
var $this = $(this);
var tr = $this.closest('tr');
$this.hide();
$this.next().show();
$(tr).find(".duecolour, .i, .delival, .binval").hide();
});
$(".show").on('click', function(){
var tr = $(this).closest('tr');
$(this).hide();
$(this).prev().show();
$(tr).find(".duecolour, .i, .delival, .binval").show();
});
});
即使在使用localStorage刷新页面后，如何保存我的页面状态（隐藏行或反之亦然）？
我尝试按照“隐藏”功能进行测试，但没有工作。
localStorage.setItem('d', $("#data_display").html());
var newData = localStorage.getItem('d');
return $("#data_display").html(newData);
编辑 - 在这里添加JSP代码
<%@page import="java.util.ArrayList"%>
<%@page import="com.chcec.humanResources.HeldPosition"%>
<%@page import="java.util.Set"%>
<%@page import="com.chcec.humanResources.Person"%>
<%@page import="com.chcec.humanResources.Position"%>
<%@page import="com.chcec.humanResources.StaffMember"%>
<%@page import="com.chcec.materials.criticalparts.FreightForwarder"%>
<%@page import="com.chcec.materials.criticalparts.RequiredDelivery"%>
<%@page import="com.chcec.materials.criticalparts.Vendor"%>
<%@page import="java.util.List"%>
<%@page import="org.hibernate.criterion.Order"%>
<%@page import="org.hibernate.Session"%>
<%@page import="java.util.*"%>
<%@page import="java.util.Calendar"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="/chcec/spannernet" prefix="chcec"%>
<chcec:nocache />
<chcec:hibernate>
<%
Session sess = (Session) pageContext.getAttribute("hibernatesession");
StaffMember user = StaffMember.getAuthenticatedUser(request.getRemoteUser(), sess);
pageContext.setAttribute("user", user);
@SuppressWarnings("unchecked")
List<RequiredDelivery> requiredParts = sess.createCriteria(RequiredDelivery.class).list();
Collections.sort(requiredParts);
pageContext.setAttribute("requiredParts", requiredParts);
@SuppressWarnings("unchecked")
List<FreightForwarder> freightForwarders = sess.createCriteria(FreightForwarder.class)
.addOrder(Order.asc("name")).list();
pageContext.setAttribute("freightForwarders", freightForwarders);
//TODO: Use POS_POS_RESPONSIBILITY for this
Position pos = (Position) sess.get(Position.class, 62L);
List<Person> mcs = new ArrayList<Person>();
Set<HeldPosition> hps = pos.getAppointees();
for (HeldPosition hp : hps) {
if (hp.getHolder().isStaff()) {
mcs.add(hp.getHolder());
}
}
//List<StaffMember> mles = sess.createCriteria(StaffMember.class).addOrder(Order.asc("name")).list();
pageContext.setAttribute("mcs", mcs);
boolean canOrder = true;
boolean canFulfill = true;
pageContext.setAttribute("canFulfill", canFulfill);
pageContext.setAttribute("canOrder", canOrder);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Critical Parts</title>
<jsp:include page="/include/htmlhead.inc" />
<link rel="stylesheet" href="styles/matStyle.css">
<script src="scripts/matScript.js"></script>
</head>
<body>
<jsp:include page="/include/header.inc" />
<jsp:include page="/include/layout24_a.inc" />
<jsp:include page="/include/layout24_b.inc" />
<h1>Critical Parts</h1>
<table class="key">
<col style='width: 20px;' />
<col />
<tr>
<th colspan='2' style='text-align: left;'>Key:</th>
</tr>
<tr>
<td class='today'> </td>
<td>Due today</td>
</tr>
<tr>
<td class='tomorrow'> </td>
<td>Due tomorrow</td>
</tr>
<tr>
<td class='inTransit'> </td>
<td>Received but not binned</td>
</tr>
<tr>
<td class='gr'> </td>
<td>Received</td>
</tr>
</table>
<table class="required" id="data_display">
<col style='text-align: center; width: 100px;' />
<col style='width: 160px;' />
<col style='text-align: center; width: 100px;' />
<col style='text-align: center; width: 120px;' />
<col style='text-align: center; width: 120px;' />
<col style='text-align: center; width: 140px;' />
<col />
<col style='text-align: center; width: 150px;' />
<col style='text-align: center; width: 80px;' />
<col style='text-align: center; width: 80px;' />
<col style='text-align: center; width: 30px;' />
<col style='text-align: center; width: 30px;' />
<thead>
<tr>
<th id="due_header">Due</th>
<th>Vendor</th>
<th>Freight</th>
<th>AWB</th>
<th>PO</th>
<th>PN</th>
<th>Part Description</th>
<th>Comments</th>
<th>MLE</th>
<th>Engine</th>
<th>Pegged</th>
<th>Delivered</th>
<th>GR</th>
<th>Binned</th>
</tr>
</thead>
<tbody>
<c:forEach items="${requiredParts}" var="part">
<tr id="order${part.id}" class="parts">
<td class="duecolour" id="sort"><fmt:formatDate value="${part.due}"
pattern="dd-MMM-yyyy" /></td>
<td class="i">${part.vendor}</td>
<td class="i"><c:choose>
<c:when test="${not empty part.freight.iconFile}">
<img alt="${part.freight.name}"
src="images/${part.freight.iconFile}" class="freight_logo" />
</c:when>
<c:otherwise>${part.freight.name}</c:otherwise>
</c:choose></td>
<td class="i">
<a href="${part.trackingLink}" target="_blank">${part.awb}</a>
</td>
<td class="i">${part.purchaseOrder}</td>
<td class="i">${part.partNumber}</td>
<td class="i">${part.partDescription}</td>
<td class="i">${part.comments}</td>
<td class="i"><a href='javascript:view("${part.mle.usercode}");void 0'>${part.mle.name}</a></td>
<td class="i">${part.engine}</td>
<td class="i" align="center">
<c:choose>
<c:when test="${part.pegged == true}"><img src="images/tick.gif" name="peg" alt="${part.pegged == true}" class="pegval"/></c:when>
<c:otherwise></c:otherwise>
</c:choose>
</td>
<td class="delival"><c:choose>
<c:when test="${not empty part.delivery}">
<fmt:formatDate value="${part.delivery.date}"
pattern="MMM/dd HH:mm" />
</c:when>
<c:otherwise></c:otherwise>
</c:choose></td>
<td class="i"><c:choose>
<c:when test="${canFulfill}">
<input type="checkbox" name="gr"/>
</c:when>
<c:otherwise>
<input type="checkbox" />
</c:otherwise>
</c:choose></td>
<td align="center" class="binval">
<c:choose >
<c:when test="${canFulfill}">
<input type="checkbox" name="bin" value="${part.id}"/>
</c:when>
<c:otherwise>
<input type="checkbox" name="bin"/>
</c:otherwise>
</c:choose>
</td>
<td>
<button class="hide" id="hiding" type="button" value="Hide">Hide</button>
<button class="show" id="showing" type="button" value="Show" style="display:none;">Show</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<jsp:include page="/include/layout234_d.inc" />
<jsp:include page="/include/footer.jsp"><jsp:param
name="owner" value="fcec398" /></jsp:include>
</body>
</html>
<c:if test="${not empty error}">${error}</c:if>
</chcec:hibernate>