誰かが次のことで私を助けてくれませんか? 私は自分のプロジェクトに春を使用しています。最初の行がコントローラーから読み込まれるテーブルを持つ jsp ページがあります。テーブルには、ユーザーが複数の行を追加してフォームを送信する前にレコードを追加できる「行の追加」ボタンもあります。何が起こるかというと、私は AutopopulatingList を使用しているので、送信では各行がコントローラーの個別のオブジェクトとして処理されます。私の問題は追加ボタンにあります。JQuery を使用して動的に行を追加します。しかし、クローンオプションは適切ではありません(間違っていれば正しいと思います)。リストのインデックスを処理できないためです。以下を使用しましたが、何も機能しません。
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Addcolsinviews Add</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#addStudentButton").click(function() {
$('#dataTable tbody>tr:last').clone(true).insertAfter('#dataTable tbody>tr:last');
return false;
});
});
</script>
</head>
<body>
<%@include file="header.jsp" %>
</div>
<div class="main">
<%@include file="tableslist.jsp" %>
<div class="content">
<div class="subtitle">ADDCOLSINVIEWS ADD</div>
<form:form method="POST" name="addcolsForm" id="addcolsForm" commandName="addcolsinviewsadd">
<table id="dataTable">
<thead>
<tr margin-top="10px">
<th>Target View</th>
<th>Target Column</th>
<th>Source View</th>
<th>Source Column</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="rowToClone">
<td>
<spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetview">
<form:input path="${status.expression}"/>
</spring:bind></td>
<td>
<spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetcol">
<form:input path="${status.expression}"/>
</spring:bind></td>
<td>
<spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourceview">
<form:input path="${status.expression}"/>
</spring:bind></td>
<td>
<spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourcecol">
<form:input path="${status.expression}"/>
</spring:bind></td>
<td><input type="button" id="addStudentButton" value="Add"/></td>
</tr>
</tbody>
</table>
<input id="actionbtn" type="submit" value="Process">
</form:form>
</div>
</div>
</body>
</html>
2 番目の試行は、次のように jquery の一部でした。
<SCRIPT language="javascript">
$(document).ready(function() {
var incrementVar = 0;
$("#addStudentButton").click(function() {
incrementVar++;
var appendTxt = "<tr>";
appendTxt = appendTxt +
"<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetview\">";
appendTxt = appendTxt +
"<form\:input path=\"${status.expression}\"/>";
appendTxt = appendTxt +
"</spring\:bind></td>";
appendTxt = appendTxt +
"<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetcol\">";
appendTxt = appendTxt +
"<form\:input path=\"${status.expression}\"/>";
appendTxt = appendTxt +
"</spring\:bind></td>";
appendTxt = appendTxt +
"<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourceview\">";
appendTxt = appendTxt +
"<form\:input path=\"${status.expression}\"/>";
appendTxt = appendTxt +
"</spring\:bind></td>";
appendTxt = appendTxt +
"<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourcecol\">";
appendTxt = appendTxt +
"<form\:input path=\"${status.expression}\"/>";
appendTxt = appendTxt +
"</spring\:bind></td></tr>";
alert(appendTxt);
$("#dataTable tr:last").after(appendTxt);
</script>
上記の問題は、行がまったく追加されないことです。ページは行を追加しようとしているようですが、小さすぎます..そしてエラーは発生しません。appendTxt のアラートで ${status.expression} が存在しません。パスがヌルです。これが問題だと思います。構文が大丈夫かどうか、またはこれを別の方法で書くことができるかどうか、誰かが知っていますか??
どうすればいいのかわからず、すでにたくさん検索しました。助けていただければ幸いです。