如何在HTML5中使用CSS3在灯箱中显示编辑输入字段
[英]how to display edit input fields in lightbox using css3 in html5
问题描述
I am new to html5 , on my layout I placed an "edit" button in a table row. 
我是html5的新手，在布局上，我在表格行中放置了一个“编辑”按钮。 When we click on edit button it displays particular row fields on light box with same layout. 当我们单击编辑按钮时，它会以相同的布局在灯箱上显示特定的行字段。 My problem is that when I click on edit button it should display particular row details in another window. 我的问题是，当我单击“编辑”按钮时，它应该在另一个窗口中显示特定的行详细信息。
This is my table and edit button code in jsp: 这是我在jsp中的表格和编辑按钮代码：
<body onload="altRows();">
<%@include file="dbheader.jsp" %>
<table class="altrowstable" id="alternatecolor">
<tr>
<th>code</th>
<th>Name</th>
<th>Phone</th>
<th>Address1</th>
<th>Address2</th>
<th>Postal Code</th>
<th>E-mail</th>
<th>Website</th>
<th>Blog</th>
<th>Fax</th>
<th>City</th>
<th>State</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Date</th>
</tr>
<c:forEach items="${businesslist}" var="business">
<tr>
<td>${business.busent_code}</td>
<td>${business.busent_name}</td>
<td>${business.busent_phone}</td>
<td>${business.busent_address1}</td>
<td>${business.busent_address2}</td>
<td>${business.busent_postal_code}</td>
<td>${business.busent_email}</td>
<td>${business.busent_website}</td>
<td>${business.busent_blog}</td>
<td>${business.busent_fax}</td>
<td>${business.busent_city}</td>
<td>${business.busent_state}</td>
<td>${business. busent_longitude}</td>
<td>${business.busent_latitude}</td>
<td>${business.busent_date}</td>
<form:form commandName="business" action="updatebusinessess" method="post" >
<td> <form:input id="busent_name" path="busent_name" type="hidden" value="${business.busent_name}"/>
<input id="submit" type="button" onclick="javascript:return lightbox();" tabindex="5"value="Edit">
</form:form>
<td>Show Map</td>
<td><input type="checkbox"></td>
</tr>
</c:forEach>
</table>
<table border="0" cellpadding="5" cellspacing="5" align="center">
<tr>
<%--For displaying Previous link except for the 1st page --%>
<c:if test="${currentPage != 1}">
<td><a href="<c:url value="/business_details?page=${currentPage - 1}"/>">Previous</a></td>
</c:if>
<%--For displaying Page numbers.The when condition does not display a link for the current page-- %>
<c:forEach begin="1" end="${noOfPages}" var="i">
<c:choose>
<c:when test="${currentPage eq i}">
<td>${i}</td>
</c:when>
<c:otherwise>
<td><a href="<c:url value="/business_details?page=${i}"/>">${i}</a></td>
</c:otherwise>
</c:choose>
</c:forEach>
<%--For displaying Next link --%>
<c:if test="${currentPage lt noOfPages}">
<td><a href="<c:url value="/business_details?page=${currentPage + 1}"/>">Next</a></td>
</c:if>
</tr>
</table> <br><br>
<%@ include file="dbfooter.jsp" %>
this my lightbox and row fields code in jsp. 这是我在jsp中的灯箱和行字段代码。
<div id="light1" class="content2">
<form:form commandName="business" action="savebusinessess" method="post" runat="server">
<table border="0">
<c:forEach items="${businesslist}" var="business" >
<tr>
<th>Name</th>
<td><form:input path="busent_name" value="${business.busent_name}" size="30"/></td>
</tr>
<tr>
<th>Address1</th>
<td><form:input path="busent_address1" value="${business.busent_address1}" size="30"/></td>
</tr>
<tr>
<th>Address2</th>
<td><form:input path="busent_address2" value="${business.busent_address2}" size="30"/></td>
</tr>
<tr>
<th>City</th>
<td><form:input path="busent_city" value="${business.busent_city}" size="30"/></td>
</tr>
<tr>
<th>State</th>
<td><form:input path="busent_state" value="${business.busent_state}" size="30"/></td>
</tr>
<tr>
<th>Phone</th>
<td><form:input path="busent_phone" value="${business.busent_phone}" size="30"/></td>
</tr>
<tr>
<th>Website</th>
<td><form:input path="busent_website" value="${business.busent_website}" size="30"/></td>
</tr>
<tr>
<th>Zip code</th>
<td><form:input path="busent_postal_code" value="${business.busent_postal_code}" size="30"/> </td>
</tr>
<tr>
<th>Longitude</th>
<td><form:input path="busent_longitude" value="${business.busent_longitude}" size="30"/></td>
</tr>
<tr>
<th>Latitude</th>
<td><form:input path="busent_latitude" value="${business.busent_latitude}" size="30"/></td>
</tr>
<tr>
<th>Date:</th>
<td><form:input path="busent_date" value="${business.busent_date}" size="30"/></td>
</tr>
</c:forEach>
</table>
<input id="submit" type="submit" align="left" value="update Details" onclick="myFunction();"/>
</form:form>
<a href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none';">Close</a>
</div>
i am getting lightbox but i get all table rows display on lightbox. 我正在使用灯箱，但所有表格行都显示在灯箱上。
controller: 控制器：
@Controller
public class UpdateController {
@Autowired
private UpdateService updateService;
private static final Log logger = LogFactory.getLog(UpdateController.class);
@RequestMapping(value = "/updatebusinessess")
public String updateBusinessess(Business business,Model model) {
logger.info("updatebusinessess");
List<Business> bus=updateService.updateBusinessdetails(business);
model.addAttribute("businesslist",bus);
model.addAttribute("business",new Business());
return "updatingdetails";
}
@RequestMapping(value = "/savebusinessess")
public String addBusinessess(Business business, BindingResult result) {
logger.info("addbusinessess");
updateService.saveBusinessdetails(business);
return "success";
}
@RequestMapping(value = "/update")
public String updateBusiness( Model model) {
logger.info("updatebusiness");
model.addAttribute("business",new Business());
return "updatebusinessdetails";
}
}
1 个解决方案
解决方案1
0 2014-12-11 05:23:03
The idea here is that you should create a lightbox itself first to be in DOM. 这里的想法是，您应该首先在DOM中创建灯箱本身。 For example: 例如：
<div id="lightbox1">
<input type="text" id="name1"/>
<input type="text" id="address1"/>
...
</div>
Your button should fill its input with specific value. 您的按钮应使用特定值填充其输入。 You can use also jQuery: 您也可以使用jQuery：
$("#name1").val("John");
$("#address1").val("My street 1");
...
I think the idea is clear now. 我认为现在的想法很明确。 If so, you need just take values from the row instead of "John" and "My street 1". 如果是这样，您只需要从行中获取值，而不是“ John”和“ My street 1”。 The simplest way will be to name every component in rows for using in jQuery or you can find parent element for the every button on the row and relatively to that find particular inputs (this will be little challenging if you're new to HTML and JS). 最简单的方法将是命名行中的每个组件以供在jQuery中使用，或者您可以为行中的每个按钮找到父元素，并相对于该元素找到特定的输入（如果您不熟悉HTML和JS，这将没有什么挑战性）。
For lightbox you can use any lightbox solution written in jQuery and attach the "div" element to that lightbox. 对于灯箱，您可以使用任何用jQuery编写的灯箱解决方案，并将“ div”元素附加到该灯箱。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.