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

how to display edit input fields in lightbox using css3 in html5

本文关键字：显示 编辑 输入 字段 HTML5 CSS3      更新时间：2023-09-26

我是html5的新手，在我的布局上，我在表格行中放置了一个"编辑"按钮。当我们单击编辑按钮时，它会在具有相同布局的灯箱上显示特定的行字段。我的问题是，当我单击编辑按钮时，它应该在另一个窗口中显示特定的行详细信息。

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

这里的想法是，你应该先创建一个灯箱本身，以便在DOM中。例如：

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

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

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

我认为这个想法现在已经很清楚了。如果是这样，您只需从行中获取值，而不是"John"和"My street 1"。最简单的方法是命名行中的每个组件以在jQuery中使用，或者您可以找到行上每个按钮的父元素，并且相对而言，查找特定的输入（如果您不熟悉HTML和JS，这将没有什么挑战性）。

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

相关文章：