个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 08:49:48 25 4
gpt4 key购买 nike

我是 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 :

@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”元素附加到该灯箱。

关于javascript - 如何在html5中使用css3在灯箱中显示编辑输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27415740/

25 4 0
文章推荐： javascript - contentEditable ExecCommand "bold"无法触发
文章推荐： css - stroke-opacity 对 svg :text while conveting svg to pdf using fop-2. 2 没有影响
文章推荐： CSS 动画涉及 Safari 上的不透明度、缩放和翻译问题
文章推荐： javascript - 静音/取消静音按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com