如何在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在燈箱中顯示編輯輸入字段

回答

相關問題