또야또야
28
2019-09-09 13:26:33 작성 2019-09-09 13:28:33 수정됨
12
364

테이블 특정행을 다른 테이블에서 상세정보 표시 형태로 값을 넘겨주고 싶어요..


<%@page import="com.marin.domain.MasterCodeVO"%>

<%@page contentType="text/html; charset=UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Master Register</title>

<META http-equiv="imagetoolbar" content="no">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge">


<script type="text/javascript"

src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript"

src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

<script type="text/javascript">


function modify(gbn,a, b, c, d) {

if (gbn == '1' ) {

alert("등록");

var url = "/mcode_regi";

var name = "mcode_regi"

var settings = "top=350,left=850,width=300,height=300,toolbar=no,status=no,location=no,scrollbars=yes,menubar=no,resizable=yes,right=50";

window.open(url, name, settings);

} else {

alert("수정");

var code_Id = a;

var code_Nm = b;

var use_Wher = c;

var remark = d;


alert(code_Id);

var url = "/mcode_modi/" + code_Id;

var name = "mcode_modi"

var settings = "top=350,left=850,width=300,height=300,toolbar=no,status=no,location=no,scrollbars=yes,menubar=no,resizable=yes,right=50";

}

window.open(url, name, settings);

}


function detail(a) {

var code_Id = a;

var url = "/codelist/" + code_Id;

location.href = url;

}


///////////////////상세정보 구현////////////////////

function detailInfo(a) {

// var code_Id = a;

// var url = "/detailInfo/" + code_Id;

// alert("code_Id :" + code_Id)

// location.href = url;


// var a = document.getElementById("a1").textContent;

// var b = document.getElementById("a2").textContent;

// var c = document.getElementById("a3").textContent;

// var d = document.getElementById("a4").textContent;

// alert(a +"," + b + "," + c + "," + d);


}



////////////////////////////////////////////////

</script>

</head>

<form action="/master" method="POST">

<body>

<div style="width: 33%; float: left;">

♠ 마스터 코드

<input onclick="modify('1');" type="button" value="추가">

<table width="500" border="1">

<tr>

<td>코드명</td>

<td>사용여부</td>

<td>추가/수정</td>

</tr>

<c:choose>

<c:when test="${empty list}">

<tr>

<td colspan="3">검색 결과가 없습니다.</td>

</tr>

</c:when>

<c:otherwise>

<c:forEach items="${list}" var="vo">

<tr>

<%-- <input type="text" id="id" name="mcode_Id" value="${vo.CODE_ID}"> --%>

<td onclick="detail('${vo.CODE_ID}');">${vo.CODE_NM}</td>

<td id="userYn">${vo.USE_WHER}</td>

<td>

<input onclick="modify('2','${vo.CODE_ID}','${vo.CODE_NM}','${vo.USE_WHER}','${vo.REMARK}');" type="button" value="수정"></td>

</tr>

</c:forEach>

</c:otherwise>

</c:choose>

</table>

</div>


<div style="width: 33%; float: left;">

<form action="/codelist" method="POST">

♠ 코드 리스트

<table id="example-table-1" width="500" border="1">

<tr>

<td>순번(현재 코드ID)</td>

<td>코드명</td>

<td>비고</td>

<td>사용여부</td>

</tr>


<c:choose>

<c:when test="${empty list}">

<tr>

<td colspan="3">검색 결과가 없습니다.</td>

</tr>

</c:when>

<c:otherwise>


<c:forEach items="${cVo}" var="vo" varStatus="status" >

<tr>

<td id= "a1" onclick = "detailInfo('${vo.CODE_ID}');">${vo.CODE_ID}</td>

<td id= "a2">${vo.CODE_NM}</td>

<td id= "a3">${vo.REMARK}</td>

<td id= "a4">${vo.USE_WHER}</td>

<td><input type="button" class="checkBtn" value="클릭"></td>

</tr>

</c:forEach>

</c:otherwise>

</c:choose>


</table>


<a href="getCode?page=1">&lt;&lt;</a>

&nbsp;<a href="getCode?page=${navi.startPageGroup-1}">&lt;</a>

<c:forEach var="counter" begin="${navi.startPageGroup}" end="${navi.endPageGroup}">

<a href="getCode?page=${counter}">${counter}</a>

</c:forEach>

<a href="getCode?page=${navi.endPageGroup+1}">&gt;</a>&nbsp;

<a href="getCode?page=${navi.totalRecordsCount}">&gt;&gt;</a>


</form>

</div>

<form action="/detailInfo" method = "GET">

<div style="width: 33%; float: left;">

♠ 상세코드 (선택된 마스터 코드 명) <input onclick="addcode();" type="button"

value="추가"> <input onclick="savecode();" type="button"

value="저장">

<table width="300" border="1" items="${cVo1}">

<tr>

<td>코드ID</td>

<td>${cVo1.MASTER_CODE_ID}</td>

<td>코드 명</td>

<td><%=request.getParameter("code_Nm") %></td>

</tr>

<tr>

<td>사용 여부</td>

<td><%=request.getAttribute("use_Wher") %></td>

<td>정렬 순서</td>

<td>구현xxx</td>

</tr>

<tr>

<td>비고</td>

<td colspan="3"><%=request.getAttribute("remark") %></td>

</tr>

</table>

</div>

</form>

</form>

</body>

</html>





위의 사진과 같은 형태로 값을 넘겨주고 싶습니다.
컨트롤러나 dto(혹은vo)사용 하지않고
스크립트로 getElementById 를 사용하면 행의 위치를 인식하지 못해
어떤행을 클릭해도 똑같은 1행의 값을 가져옵니다.
방법이 없을까요??
각 행에대한 상세한 정보를 옆 테이블에 표시하는 것이 미션입니다...
상세하게 하나하나 알려주세요.
신입 개발자라 아무것도 모릅니다 ㅠㅠ
부탁드립니다.

0
0
  • 답변 12

  • 죠낸또이또이
    365
    2019-09-09 13:45:01
    혹시 jQuery 는 사용이 불가능하신 상태인가요?
    1
  • 또야또야
    28
    2019-09-09 13:46:59

    아니요 그런건 아닌데 제이쿼리든 스크립트이든 방법을 알려주시면 좋겠어요~


    위에 보셨는지 모르시겠지만, 자바스크립트 getBy로 시도해보았으나... 

    어떤행을 클릭해도 첫번째 행 값만 가져와서...부탁드리겠습니다.

    0
  • minarai
    2k
    2019-09-09 14:04:19
    0
  • n016omega
    239
    2019-09-09 14:05:38 작성 2019-09-09 14:11:06 수정됨

    원하시는 기능이 제가생각하는게 맞다면 값 4개를 다 넘겨주세요

    onclick = "detailInfo('${vo.CODE_ID}' ,'${vo.CODE_NM}', '${vo.REMARK}', '${vo.USE_WHER}');"

    이렇게하시고 호출부분에서

    function detailInfo(a, b, c, d) {

          alert(a + " :"  + b + " : " + c + " : " + d);

    }

    이렇게 하시면 될거같은데 url 파라메터는 code_id만 넘기시는데 값들은

    왜 받으려고 하시는지 이유는 잘모르겠지만 ID로 똑같은걸로 주시고 for문 돌리면

    똑같은 id 가 여러개 생기는데 보통 그렇게 코딩을 하지 않습니다. name 이나 class 는

    중복되도 되는데 id값은 유일하게 두셔야 합니다.

    만약에 id로 꼭가져와야한다면 중복되지 않는 키값으로 id값을 지정해주세요

    예를들면 <td id="a1_${vo.CODE_ID}">클릭</td> 이런식으로 하시고

    호출할때 $("#a1_" + code_id).val(); 이렇게 가능하겠죠



    0
  • 죠낸또이또이
    365
    2019-09-09 14:06:58 작성 2019-09-09 14:08:13 수정됨

    음.. 도움이 되셨으면 좋겠네요.

     https://www.w3schools.com/code/tryit.asp?filename=G7T7OEJBBQ54


    그리고, HTML 에서 id 속성은 고유 식별자 입니다.

    HTML 문서에서 단 하나만 존재해야 하는 속성인거죠.

    만약, Group 으로 묶는 용도로 사용을 원하신다면 class 라는 속성을 사용하시는게 맞습니다.



    0
  • 죠낸또이또이
    365
    2019-09-09 14:11:06

    위 소스는 말씀하신대로 click 이벤트 발생했을 때 table 을 읽어서 해당 데이터를 다른 테이블에 복사하는(?) 원리로 소스를 말씀드렸구요.


    만약 제가 처음부터 구현한다면 처음에 왼쪽 테이블에 뿌릴때 데이터를 Javascript 에서 가지고 있다가

    클릭 이벤트 발생시 순번 (현재 코드 ID)로 검색하여 해당 데이터를 다른 테이블에 넣을 것 같네요.

    0
  • 또야또야
    28
    2019-09-09 14:16:06 작성 2019-09-09 14:16:15 수정됨

    n016omega 님

    값은 앨럿으로 넘어오는거 확인했는데

    반대쪽 테이블에 출력하려면 어떻게 해야하나요??

    0
  • 또야또야
    28
    2019-09-09 14:17:43

    죠낸또이또이 님


    음.....제가 따라해봐도 아직 미숙한 단계인지라 어렵네요 ㅠㅠ


    0
  • n016omega
    239
    2019-09-09 14:44:20

    먼저 URL을 GET방식으로 호출 시 파라메터를 어떻게 넘기는지 아셔야 할 것 같아요

    function fnTest(code_id, code_name) {
       var url = "/detailinfo?code_id"=1111 + "&code_name=" + code_name;
    
       location.href = url;
    }

    이런식으로 호출하게되면 호출된 페이지에서는

    JSTL : ${param.code_id}, ${param.code_name}

    스크립트릿 : <%= request.getParameter("code_id") %>,  <%= request.getParameter("code_name") %> 

    이런식으로 받아 올 수 있습니다.

    0
  • 죠낸또이또이
    365
    2019-09-09 14:48:15

    상세코드 value가 들어갈 td마다 id를 지정하고

    tr 클릭시 jQuery를 이용하여 text 값을 추출하고

    추출한 text 값을 id에 맞게 넣어주면 좀 더 쉽게 하실 수 있으실것같네요.



    0
  • 또야또야
    28
    2019-09-09 15:27:51

    n016omega 

    URL은 겟방식이에요~ 

    음..제가 파라미터의 정확한 의미를 잘모르겠네요...

    아무튼 따라해보니 404 에러가 나네요~



    0
  • 또야또야
    28
    2019-09-09 15:28:18

    n016omega 

    혹시 코드를 드리면 분석한번 해봐주실수 있을까요?



    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.