[jQuery] table row index 자동 입력

원하는 기능 : 수정을 눌렀을 때 입력하는 Form과 동일한 Form에 자동적으로 수정하려는 데이터가 먼저 들어가 있는 기능

 

onclick이벤트에서 데이터 전달하도록 파라미터를 입력

<c:forEach var="item" items="${list}" varStatus="s">
	<tr>
		<td id="index" class="tal">${s.index+1}</td> <!-- 인덱스 표현 -->
		<td id="dataSetKor" class="tal">${item.korName}</td>
		<td id="dataSetEng" class="tal">${item.engName}</td>
		<td id="dataSetVersion" class="tal">${item.version}</td>
		<td>
			<a href="javascript:;" class="btn-sm" onclick="fn_deleteDataSet()">삭제</a>
            
             <!-- 데이터 값 전달 -->
			<a href="javascript:;" class="btn-sm" onclick="fn_dataSetUpdate(
            '${item.korName}', '${item.engName}', '${item.version}')">수정</a>
			
            <a href="javascript:;" class="btn-sm" onclick="fn_dataSetMng()">변수관리</a>
		</td>
	</tr>
</c:forEach>

 

입력 받은 데이터 textarea에 출력

// JavaScript
<script>
...
function fn_dataSetUpdate(korName, engName, version) {
    $("#updateKorName").val(korName);
    $("#updateEngName").val(engName);
    $("#updateVersion").val(version);

    $("#korName").focus();
    showPopup('updateDataSet');
    closePopup();
}
...
</script>


<!-- JSTL -->
...
<tbody id="updateDataSet">
	<tr>
		<td>데이터셋명(테이블 한글명)</td>
		<td><input type="text" id="updateKorName" name="korName" class="w100" autocomplete="off" maxlength="50"></td>
	</tr>
	<tr>
		<td>데이터셋명(테이블명)</td>
		<td><input type="text" id="updateEngName" name="engName" class="w100" autocomplete="off" maxlength="50"></td>
	</tr>
	<tr>
		<td>버전</td>
		<td><input type="text" id="updateVersion" name="version" class="w100" autocomplete="off" maxlength="50"></td>
	</tr>
</tbody>
...

 

 

+ ) model값을 직접 지정하여 전송 가능

...
<form modelAttribute="adminPublicDataSearchVO" id="frm" name="frm" method="post" class="d-flex p-relative">
	...
</form>
...