Java 想要在jsp页面上添加动态内容吗
我使用Struts2标签在前端设计页面 现在我需要在我的jsp页面中添加3个简单字段&在一些add链接上,我想重复地在同一表单中添加另外3或4个字段 例如,若用户在添加链接上单击5次,那个么3或4字段必须在jsp页面上显示5次 我知道ajax在这方面很有用。但我仍然对如何实现这一目标感到困惑 如果任何人有解决方案,请回复Java 想要在jsp页面上添加动态内容吗,java,ajax,jsp,struts2,Java,Ajax,Jsp,Struts2,我使用Struts2标签在前端设计页面 现在我需要在我的jsp页面中添加3个简单字段&在一些add链接上,我想重复地在同一表单中添加另外3或4个字段 例如,若用户在添加链接上单击5次,那个么3或4字段必须在jsp页面上显示5次 我知道ajax在这方面很有用。但我仍然对如何实现这一目标感到困惑 如果任何人有解决方案,请回复 thanx提前…您最好的方法是使用简化javascript。此简单的html页面演示了以下方法: <html> <head> <scr
thanx提前…您最好的方法是使用简化javascript。此简单的html页面演示了以下方法:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"/>
</head>
<body>
<form method="post" action="#">
<table>
<tbody>
<tr>
<td><input type="text" name="fieldname"/></td>
<td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td>
</tr>
<tr>
<td><input type="text" name="fieldname"/></td>
<td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><a href="#" onclick="var tr = $(this).closest('table').find('tbody tr:first-child').clone(true); $(tr).find(':input').val(''); $(this).closest('table').find('tbody').append(tr); return false;">add</a>
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
这是该方法的简要介绍。每个重复元素都是表中行的一部分。您可以选择任何其他类型的容器来相应地调整jquery。重复元素位于每一行的tbody中,有一个输入和一个删除该行的链接。请注意,只有当该行不是tbody的唯一子行时,它才会删除该行。我们需要这样做,以便始终能够从add链接添加新元素。add逻辑位于tfoot中。add链接在相应的tbody中查找第一个表行,克隆它,清除任何输入字段中的所有值,并将其作为新行附加到tbody
在一个属性中嵌入这么多javascript/jquery并不像我在本例中所做的那样是一种很好的做法。您最好的方法是使用它来简化javascript。此简单的html页面演示了以下方法:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"/>
</head>
<body>
<form method="post" action="#">
<table>
<tbody>
<tr>
<td><input type="text" name="fieldname"/></td>
<td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td>
</tr>
<tr>
<td><input type="text" name="fieldname"/></td>
<td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><a href="#" onclick="var tr = $(this).closest('table').find('tbody tr:first-child').clone(true); $(tr).find(':input').val(''); $(this).closest('table').find('tbody').append(tr); return false;">add</a>
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
这是该方法的简要介绍。每个重复元素都是表中行的一部分。您可以选择任何其他类型的容器来相应地调整jquery。重复元素位于每一行的tbody中,有一个输入和一个删除该行的链接。请注意,只有当该行不是tbody的唯一子行时,它才会删除该行。我们需要这样做,以便始终能够从add链接添加新元素。add逻辑位于tfoot中。add链接在相应的tbody中查找第一个表行,克隆它,清除任何输入字段中的所有值,并将其作为新行附加到tbody
在属性中嵌入如此多的javascript/jquery并不像我在本例中所做的那样是一种好的做法