如何在html5中使用css3在灯箱中显示编辑输入字段

我是新来的html5，在我的布局中，我在表格行中放置了一个“编辑”按钮。当我们点击编辑按钮时，它会在相同布局的灯箱上显示特定的行区域。我的问题是，当我点击编辑按钮时，它应该在另一个窗口中显示特定的行详细信息。如何在html5中使用css3在灯箱中显示编辑输入字段

这是在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" %>

这是我在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>

我得到灯箱，但我得到所有表格行显示在灯箱上。

控制器：

@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"; 
} 
}

来源

2014-12-11 Chamundeswari Chamu

这里的想法是，你应该建立一个收藏本身首先要在DOM。例如：

<div id="lightbox1"> 
    <input type="text" id="name1"/> 
    <input type="text" id="address1"/> 
    ... 
</div>

您的按钮应该用特定值填充其输入。您也可以使用jQuery：

$("#name1").val("John"); 
$("#address1").val("My street 1"); 
...

我认为这个想法现在已经很清楚了。如果是这样，你只需要从行中取值而不是“约翰”和“我的街道1”。最简单的方法是命名行中的每个组件以便在jQuery中使用，或者可以找到行中每个按钮的父元素，并相对于找到特定的输入（如果您是HTML和JS的新手，这将会有点困难）。

对于灯箱，您可以使用任何使用jQuery编写的灯箱解决方案，并将“div”元素附加到该灯箱。

来源

2014-12-11 05:23:03

感谢您的回复，这不是我的问题我收到灯箱，但在灯箱中显示所有表行，我需要显示来自数据库的特定行详细信息。 – 2014-12-11 06:12:15

您是否需要从数据库获取数据并在灯箱中显示？ – 2014-12-11 11:00:05

是的，我需要一个例子。 – 2014-12-11 11:04:22

如何在html5中使用css3在灯箱中显示编辑输入字段

回答

相关问题