<tr>에 id를 부여해도 될까?

 

 

화면 테이블 내 forEach를 함께 돌지않는 합계 row  별도로 추가하기 

---

 

[화면설명]

• 기존에 존재하는 조회 화면이 있는데 '연도별로 고정된 월별 12개의 Row 만을 출력'한다. 
• 이 12개의 줄 바로 아래에 각 열의 수를 합한 13번째 합계 row를 한줄 추가하는 것이었다.
• 기본 페이지는 로드되지마자 데이터가 조회되지않고 [조회]를 누르면 그제야 select 문을 돌며 데이터를 가져오는 식이다.
• 최대한 자바단이나 sql 단을 건들이지 않고 jsp 내에서 자바스트립트와 jstl로 해결해야하는 상황이었다. 
• sql을 건들어도 됐다면 시간이 좀 더 단축됐겠지만 jsp 내에서 해결해야하니 시간이 약 하루 정도 걸렸다. 

 

[할일]

• 1. 지식베이스 현황 페이지에서 고정되어 출력되는 12개의 row바로 아래 13번째 row 한줄 추가
• 2. 페이징 처리는 없음 
• 3. jsp 내에서만 처리 

 

[문제]

• 1. <forEach>를 도는 반복 내에 뿌려지는 <tr> 속에 합계 <tr>을 추가하면 같이돌아 버린다. 즉, 매 row 마다 바로 아래에 합계 row가 생겨버린다.
• 2. 그러나 내가 원하는것은 기존대로 forEach가 돌고, '마지막에 row 하나를 추가'하는 것이다. 
• 3.조회버튼을 누를때마다 새로 forEach가 돌기때문에 이와 무관하게 돌지않는 row 한줄을 추가해야 했다. 

 

[실행]

• 이를 9번, 10번 줄 처럼 tr을 forEach 밖으로 빼주니 생성됐다. 

 

<tbody>

...
   <c:forEach>
      <tr>
      </tr>
   </c: forEach>

   <tr>
   </tr>
</tbody>

 

 

 

 

---

 

 

 

 

[다음 문제]

• 1. tr를 밖으로 빼어서 forEach와는 별개로 출력되는, 그러면서 오로지 jsp 단을 건들여 만들 수 있는 row는 생성됐다.
• 문제는 이 row가 화면이 로드 됨과 동시에 혼자 덩그러니 떠 있는 것이었다. 
• 2. 조회 버튼을 누르지도않았는데 혼자 합계가 떠있는 상황인데, 따로 처리를 해주지않았으므로 당연했다. 

 

[의문]

• tr에 아이디를 부여하여 자바스크립트 단에서 화면이 로드될때 보이지 않도록 처리했다. 
• 그전에 우선 tr에 id를 부여해서 컨트롤해도 되는지부터 궁금했다. 

 

[답변]

• 챗gpt에 질문했더니 다음과같은 답변을 얻었다. 

 

 

 

 

 

---

 

 

 

 

 

[다음문제]

• 1. 클릭 이벤트가 일어나면 해당 tr 요소를 보이도록 id.style.display="table-row" 설정했다.
• 2. 문제는 페이지가 로드되면 깜빡이며 나타났다 사라진다는 점이었다. 
• 3. 왜그런가 살펴보니, 조회가 끝나면 곧바로 페이지가 재 로드 된다는 점에 있었다. 

 

$(document).ready(function(){
	let isClick = false;
    
    if(isClick) {
    	합계rowId.style.display = "table-row"; // 클릭시 true 설정후 보이도록
    } else {
	    합계rowId.style.display = "none"; // 클릭전엔 안보이도록
    }
    
    $('button[id=조회버튼]').click(function() {
    	
        //클릭하자마자 
        isClick = true;
        
    	LoadMaskShow('center');
        
        $("#조회버튼").val("Y");
        
        var frm = ducument.테이블조회폼;
        frm.action = "<%=webRoot>/.../.../.../...";
        frm.method = "post";
        frm.submit;
    
    });

});

 

 

• 5. 그러니까 아무리 클릭 이벤트 메소드 안에서 isClick = true; 처리해도 
• 6. 페이지가 새로고침되기에 갱신되어 다시 처음 기본값인 isClick = false;로 자꾸만 되돌아 가는 것이었다. 

 

 

[해결]

• 1. 기준을 임의로 설정한 변수가 아니라, 조회 전과 후에 달라지는 변수값으로 해서 if문을 태웠다. 
• 2. 그중 조회버튼 클릭 전과 후로 달라지는 대상이 두개있었는데, 1. 조회해오는 리스트 2. searchYn (검색여부)였다.
• 3. 값 존재 여부에 따라 혹은 y,n값에 따라 if문을 태워보기로 했다.
• 4.. 테이블 List 존재 여부에 따라 하려고 조회 값인 list를 받자마자 List 목록이 한꺼번에 스크립트 단으로 넘어와 log가 지저분해지고 페이지가 육안으로 느려졌다. -> 포기
• 5. searchYn의 y 혹은 n 값으로 if문을 태웠더니 적절했다. 
• 5-1. 조회버튼 클릭전엔 해당값이 N이라 display = "none"으로 설정하면 되고
• 5-2. 조회버튼 클릭후엔 해당값이 Y로설정되어 display = "table-row"로 설정해주었다.

 

[실행]

다음과같이 코드를 수정했다. 

$(document).ready(function(){
	var searchYn = "${searchYn}";
    
    if(searchYn == "Y") {
    	합계rowId.style.display = "table-row"; // 클릭시 true 설정후 보이도록
    } else {
	    합계rowId.style.display = "none"; // 클릭전엔 안보이도록
    }
    
    $('button[id=조회버튼]').click(function() {
    	
        //클릭하자마자 
        isClick = true;
        
    	LoadMaskShow('center');
        
        $("#조회버튼").val("Y");
        
        var frm = ducument.테이블조회폼;
        frm.action = "<%=webRoot>/.../.../.../...";
        frm.method = "post";
        frm.submit;
    
    });

});

 

 

 

 

 

 

 

[추가]

문자를 비교하느라 [작성2]같이 썼는데 에러가 발생했다.

[작성1]로 작성하니 문제가 없었다.

왜그런가 보니 equals는 자바의 문자열 비교시 사용되는 문법이고 자바스크립트에서는 JavaScript에서 문자열을 비교할 때는 .equals() 메서드 대신 === 연산자나 == 연산자를 사용해야 한다.

<script> 내부이므로 자바스크립트 문법을 사용해야 맞았는데 혼동했다. 

 

[작성1]

$(document).ready(function(){
    var searchYn = "${searchYn}";
    
    if(searchYn == "Y") {
        합계rowId.style.display = "table-row"; // 클릭시 true 설정후 보이도록
    } else {
        합계rowId.style.display = "none"; // 클릭전엔 안보이도록
    }

});






[작성2]

$(document).ready(function(){
    var searchYn = "${searchYn}";
    
    if(searchYn.equals("Y")) {
        합계rowId.style.display = "table-row"; // 클릭시 true 설정후 보이도록
    } else {
        합계rowId.style.display = "none"; // 클릭전엔 안보이도록
    }

});