Record_Ing

$("#테이블 아이디").on("click","tr", function(){
    alert($(this).children().eq(위치[0부터시작]).text());
});

function fn_checkRow(){
   var rowData = new Array();
   var tdArr = new Array();
   var checkBox = $('input:checkbox[name="체크박스이름"]:checked');
   if(checkBox.length == 0){
      alert("항목을 선택해주세요.")
   }else if(checkBox.length > 1){
      alert("항목은 하나만 선택헤주세요.")
   }else{
      checkBox.each(function(i){
         var tr = checkBox.parent().parent().eq(i);
         var td = tr.children();
         
         rowData.push(tr.text());
         var num = td.eq(1).text();
         var year = td.eq(2).text();
         var infoId = td.eq(3).text();
         
         
         tdArr.push(num);
         tdArr.push(year);
         tdArr.push(infoId);
         
         console.log("rowData : "+rowData);
         
         param = {
            num : num,
            year : year,
            infoId : infoId
         }
         
         $.ajax({
         	....사용해서 보내면 됨
         
        });
   }
}

// 1,000 단위 넣어주는 함수
function fn_AmtFormatter(v){
     var formattedAmt = Number(v).toLocaleString();
     return formattedAmt
};


//jquery 사용시 : 
   .text(fn_rsltnAmtFormatter1(testValue))

입력값 한글, 숫자만 받기

let regexKo = /^[ㄱ-ㅎ|가-힣]+$/;   //한국어만 입력가능
let regexNum = /^[0-9]+$/;        //숫자만 입력가능
let regexEng = /^[a-z|A-Z]+$/;	  //영어만 입력가능
let regexAll = /^[a-z|A-Z|0-9|ㄱ-ㅎ|가-힣]+$/; //영어+숫자+한글만 입력가능

//jquery 사용시 : 
      else if(regexKo.test(변수명)== false){
      alert("한글만 입력해주시기 바랍니다.")
      };

문제 : jsp로 받은 예약 정보에서 예약 취소를 누르면 예약이 취소 되게 함

첫번째 예약은 정상 작동 하는데 두번째 예약부터 버튼이 안먹힌다. 

jsp코드

<div class="mt-5 mb-5 ps-3 row row-cols-1">
          <c:forEach items="${showList}" var="show" varStatus="status">
          <div class="card col me-5 pzero" style="width: 400px;">
            <img src=/static/img/${show.thumbnail} class="card-img-top" alt="..."  width="398" height="230">
            <div class="card-body">
              <h5 class="card-title">${show.hotel_title}</h5>
              <p class="card-text text-truncate">${show.hotel_explain}</p>
              <div class="pt-2">
                <p  class="fs-6" style="color: lightgray;">${show.check_in} ~ ${show.check_out}</p>
              </div>
            </div>
            <hr style="margin-bottom: 0px;">
            <div class="card-body ">
            <span hidden="hidden" id="showhotelnum">${show.reserve_num}</span>
              <button class="btnall rounded container-fluid p-3" id="reserve_cancel">예약 취소</button>
            </div>
          </div>

js 코드

  $("#reserve_cancel").each(function(index, item){
	  item.addEventListener('click', function (event){
		  console.log("index: "+index);
		  if(confirm("예약 취소시 모든 정보는 날라갑니다.")){
			  alert("예약이 취소되었습니다.")
			  const reserve_number2= $(this).parent().find('#showhotelnum').html();
			  const email11=localStorage.getItem("my_email");
			  console.log("예약 번호는?:"+reserve_number2);
			  location.href="deleteReserve.do?reserve_num="+reserve_number2+"&email="+email11;
		  }
	  });
	});

해결 :  예약 취소 태그의 아이디를 클래스로 바꾸고 실행 했는데 된다. 

#reserve_cancel ---> .reserve_cancel

프로젝트 도중 체크인,체크아웃 날짜 값을 세션 스토리지에 넣어야 하는 상황이 왔다. 

한가지 내가 수정해줘야 하는 부분이 있었는데

지금 datepicker의 체크인, 체크아웃 값이 

이런 식으로 출력 된다

나는 이걸 00월 00일로 바꿔서 저장하려고 한다.

이유는 db랑 결제 jsp에 

이런 식으로 나오길 원하기 때문이다. 

참고로 내가 사용한 datepicker 코드는

$(function() {
    //input을 datepicker로 선언
    $("#datepicker1,#datepicker2").datepicker({
        dateFormat: 'yy-mm-dd' //달력 날짜 형태
        ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
        ,showMonthAfterYear:true // 월- 년 순서가아닌 년도 - 월 순서
        ,changeYear: true //option값 년 선택 가능
        ,changeMonth: true //option값  월 선택 가능                
        ,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
        ,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
        ,buttonImageOnly: true //버튼 이미지만 깔끔하게 보이게함
        ,buttonText: "선택" //버튼 호버 텍스트              
        ,yearSuffix: "년" //달력의 년도 부분 뒤 텍스트
        ,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
        ,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip
        ,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 텍스트
        ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
        ,minDate: "-5Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
        ,maxDate: "+5y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)  
    });                    
    
    //초기값을 오늘 날짜로 설정해줘야 합니다.
    $('#datepicker1').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후) 
           
});

구글링을  해본 결과

첫 번째 방법

let startDate = $("#datepicker1").datepicker({format:'MM월 dd일'});

가장 코드도 간결하고 빨라서 이걸로 하고 싶었는데..

자꾸 이상한 값이 출력 됐다.

값이 [object Object]로 출력이 됐다.

JSON으로 출력이 되는거다.

왜 그런지 모르겠어서 몇 시간 찾아보다 시간이 없어 다른 방법을 선택했다.

두번째 방법

//출력값이 기존(Tue Mar 26....)으로 나오던 변수
startDate = new Date(document.getElementById("datepicker1").value);
endDate = new Date(document.getElementById("datepicker2").value);

//체크인 날짜
startMonth = ('0'+(startDate.getMonth()+1)).slice(-2);
startday = ('0'+startDate.getDate()).slice(-2);
startDate1 = startMonth+'월 ' +startday+'일';
	
//체크아웃 날짜
endMonth = ('0'+(endDate.getMonth()+1)).slice(-2);
endday = ('0'+endDate.getDate()).slice(-2);
endDate1 = endMonth+'월 ' +endday+'일';

(변수에 let을 안쓴 이유는 전역으로 이미 선언했다. 이건 그 밑에 코드를 가져온 것)

바로 하나하나 월, 일 값을 구해서 합쳐 출력하는 것이다.

이 방법은 손이 좀 가지만 결과가 바로 나왔다.

사실 예전에 간단하게 하는 방법을 찾았었는데 프로젝트 날려 먹는 바람에 까먹었다.

그 방법을 다시 찾게 된다면 블로그 내용을 수정하겠다.

나 처럼 한개의 문제로 하루를 날려먹는 사람이 적어지길 바라며..