[JavaScript知识库]关于jquery只能取到c:forEach第一条数据解决方法

**

关于jquery只能取到c:forEach第一条数据解决方法（javaweb）

**

JSP里c:forEach代码

<c:forEach var="l" items="${LogList}" >
				<tr align="center">
					<td><input type="text" value="${l.username}" id="username_before"></td>
					<td><input type="text" value="${l.title}" id="title_before"></td>
					<td><input type="text" value="${l.cloumns}" id="cloumns_before"></td>
					<td><input type="text" value="${l.content}" id="content_before"></td>
					<td><input type="text" value="${l.permissions}" id="permissions_before"></td>
					<td><input type="text" value="${l.comment}" id="comment_before"></td>
					<td><input type="text" readonly="readonly" value="${l.published_time}" id="published_time_before"></td>
					<c:if test="${l.set_top==1}">
						<td><input type="text" value="true" id="set_top_before"></td>
					</c:if>
					<c:if test="${l.set_top==0}">
						<td><input type="text" value="false" id="set_top_before"></td>
					</c:if>
					<td>
						<form action="deleteLog" method="post">
							<input type="hidden" value="${l.username}" name="username_before">
							<button>删除</button>
						</form>
						
						<form action="updateLog" method="post" >
							<input type="hidden" value="${l.username}" name="username_before">
							<input type="hidden" name="username_after" id="username">
							<input type="hidden" name="title_after" id="title">
							<input type="hidden" name="cloumns_after" id="cloumns">
							<input type="hidden" name="content_after" id="content">
							<input type="hidden" name="permissions_after" id="permissions">
							<input type="hidden" name="comment_after" id="comment">
							<input type="hidden" name="set_top_after" id="set_top">
							<button calss="updateLog" id="updateLog">修改</button>
						</form>
					</td>
				</tr>
			</c:forEach>

JS代码

$("button[id='updateLog']").click(function(){
		$("input[id='username']").val($("input[id='username_before']").val());
		$('#title').val($('#title_before').val());
		$('#cloumns').val($('#cloumns_before').val());
		$('#content').val($('#content_before').val());
		$('#permissions').val($('#permissions_before').val());
		$('#comment').val($('#comment_before').val());
		$('#set_top').val($('#set_top_before').val());
})

问题：当修改操作时只能拿到第一行里的input标签里的值，除第一行外拿到的都为空值
原因：id字段的唯一性。c:forEach 标签遍历多个同名id，只有第一个才会生效

解决方案：借助c:forEach 的 varStatus=“标记名a” 属性来为每一次循环进行标记，再利用 id="名字${标记名a.index}"来为每一个id添加索引，使每次循环得到的id名为唯一的
具体的varStatus说明点这

最后的实际写法为

JSP页面

<c:forEach var="l" items="${LogList}" varStatus="status">
				<tr align="center">
					<td><input type="text" value="${l.username}" id="username_before${status.index}"></td>
					<td><input type="text" value="${l.title}" id="title_before${status.index}"></td>
					<td><input type="text" value="${l.cloumns}" id="cloumns_before${status.index}"></td>
					<td><input type="text" value="${l.content}" id="content_before${status.index}"></td>
					<td><input type="text" value="${l.permissions}" id="permissions_before${status.index}"></td>
					<td><input type="text" value="${l.comment}" id="comment_before${status.index}"></td>
					<td><input type="text" readonly="readonly" value="${l.published_time}" id="published_time_before${status.index}"></td>
					<c:if test="${l.set_top==1}">
						<td><input type="text" value="true" id="set_top_before${status.index}"></td>
					</c:if>
					<c:if test="${l.set_top==0}">
						<td><input type="text" value="false" id="set_top_before${status.index}"></td>
					</c:if>
					<td>
						<form action="deleteLog" method="post" id="">
							<input type="hidden" value="${l.username}" name="username_before">
							<button>删除</button>
						</form>
						
						<form action="updateLog" method="post" >
							<input type="hidden" value="${l.username}" name="username_before">
							<input type="hidden" name="username_after" id="username${status.index}">
							<input type="hidden" name="title_after" id="title${status.index}">
							<input type="hidden" name="cloumns_after" id="cloumns${status.index}">
							<input type="hidden" name="content_after" id="content${status.index}">
							<input type="hidden" name="permissions_after" id="permissions${status.index}">
							<input type="hidden" name="comment_after" id="comment${status.index}">
							<input type="hidden" name="set_top_after" id="set_top${status.index}">
							<button calss="updateLog" id="updateLog${status.index}" onclick="pass(${status.index})">修改</button>
						</form>
					</td>
				</tr>
			</c:forEach>

JS页面代码

function pass(status) {
	$("#username"+status).val($("#username_before"+status).val());
	$('#title'+status).val($('#title_before'+status).val());
	$('#cloumns'+status).val($('#cloumns_before'+status).val());
	$('#content'+status).val($('#content_before'+status).val());
	$('#permissions'+status).val($('#permissions_before'+status).val());
	$('#comment'+status).val($('#comment_before'+status).val());
	$('#set_top'+status).val($('#set_top_before'+status).val());
}

图片
注意：id字段唯一性，循环会遍历多个同名id，id唯一性导致只有第一个id会生效

项目代码
链接：https://pan.baidu.com/s/15YneW2LGIj2HIILZFyL_lQ
提取码：57r3