관리자 용 dataTables 라이브러리

[우혜진]

DataTables는 <table>을 그리드 형식으로 사용하고 표시 건수 제어, 페이징, 정렬, 검색, 필터, 스크롤 등의 기능을 제공하는 라이브러리라고 하네요.

관리자창에서 쓰기 좋아보여서 만들었는데 혹시 필요하신 분들은 쓰시길!

참고로 제 코드는 많이 지저분합니다!

(전체적인 모습)

(공식 홈페이지)  https://datatables.net/ 

DataTables | Table plug-in for jQuery

(만들면서 참고했던 사이트 모음)

DataTables 관련

https://hankong.tistory.com/19

https://ponyozzang.tistory.com/220

https://kutar37.tistory.com/entry/Grid-라이브러리Datatables-사용법예제

https://anerim.tistory.com/159 (열의 값 가져오기)

디자인 관련

https://anerim.tistory.com/155

http://b1ix.net/397

https://close-up.tistory.com/entry/bootstrapjs-datatable-rowadd

유튜브(6까지 있던데 전 다 봤어요 도움 많이 됐는데 시간 없으니까.. 쓰실 거면 그냥 제 거 보셔도 될 것 같아요)

https://www.youtube.com/watch?v=TC67EyewzhY

(코드)

dataTables는 모든 값을 JSON 형태로 받아와서 그걸 table 형태로 뿌려줘요.

그래서 값을 가져올 때 JSON으로 바꾸는 게 관건이었습니다.

AdminController.java

1 2 3 4 5 6 7 8 9 10 11

// 1. 회원 관리         // 회원 조회창         else if(com.equals("/AdminMemList")) {              viewPage += "/member/adminMemList.jsp";         }         // 회원 조회         else if(com.equals("/AdminMemListOK")) {                command = new AdminMemListOKCommand();               command.execute(request, response);             return;         } Colored by Color Scripter

cs

AdminMemListOkCommand.java (JSON형태로 변환)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

package kn_admin;   import java.io.IOException; import java.util.ArrayList; import java.util.HashMap;   import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;   import org.json.simple.JSONArray; import org.json.simple.JSONObject;   import kn_member.Kn_MemberVO;   public class AdminMemListOKCommand implements AdminInterface {       @SuppressWarnings("unchecked")     @Override     public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         Kn_AdminDAO dao = new Kn_AdminDAO();           ArrayList<Kn_MemberVO> vos = dao.getMemberList();   //        request.setAttribute("vos", vos);                  //HashMap<String, String> memData;         JSONObject memberObj = new JSONObject();         JSONArray memberArray = new JSONArray();                for(int i=0; i<vos.size(); i++) {            //memData = new HashMap<>();                       JSONObject mem = new JSONObject();           mem.put("idx", vos.get(i).getIdx() + "");           mem.put("mid", vos.get(i).getMid());           mem.put("pwd", vos.get(i).getPwd());           mem.put("salt", vos.get(i).getSalt());           mem.put("name", vos.get(i).getName());           mem.put("email", vos.get(i).getEmail());           mem.put("tel", vos.get(i).getTel());           mem.put("birthday", vos.get(i).getBirthday());           mem.put("address", vos.get(i).getAddress());           mem.put("gender", vos.get(i).getGender());           mem.put("memType", vos.get(i).getMemType());           mem.put("level", vos.get(i).getLevel() + "");           mem.put("levelStartDate", vos.get(i).getLevelStartDate());           mem.put("levelExpireDate", vos.get(i).getLevelExpireDate());           mem.put("totCnt", vos.get(i).getTotCnt() + "");           mem.put("todayCnt", vos.get(i).getTodayCnt() + "");           mem.put("firstVisit", vos.get(i).getFirstVisit());           mem.put("lastVisit", vos.get(i).getLastVisit());           mem.put("memberDel", vos.get(i).getMemberDel());                        memberArray.add(mem);       }       memberObj.put("data", memberArray);              response.getWriter().write(memberObj.toString());     }   }   Colored by Color Scripter

cs

AdminDAO.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

// 전체 회원 리스트 가져오기 (AdminMemListOKCommand)     public ArrayList<Kn_MemberVO> getMemberList() {         ArrayList<Kn_MemberVO> vos = new ArrayList<>();                  try {             sql = "select * from kn_member";             pstmt = conn.prepareStatement(sql);             rs = pstmt.executeQuery();                          while(rs.next()) {                 vo = new Kn_MemberVO();                 vo.setIdx(rs.getInt("idx"));                 vo.setMid(rs.getString("mid"));                 vo.setPwd(rs.getString("pwd"));                 vo.setSalt(rs.getString("salt"));                 vo.setName(rs.getString("name"));                 vo.setEmail(rs.getString("email"));                 vo.setTel(rs.getString("tel"));                 vo.setBirthday(rs.getString("birthday"));                 vo.setAddress(rs.getString("address"));                 vo.setGender(rs.getString("gender"));                 vo.setMemType(rs.getString("memType"));                 vo.setLevel(rs.getInt("level"));                 vo.setLevelStartDate(rs.getString("levelStartDate"));                 vo.setLevelExpireDate(rs.getString("levelExpireDate"));                 vo.setTotCnt(rs.getInt("totCnt"));                 vo.setTodayCnt(rs.getInt("todayCnt"));                 vo.setFirstVisit(rs.getString("firstVisit"));                 vo.setLastVisit(rs.getString("lastVisit"));                 vo.setMemberDel(rs.getString("memberDel"));                                  vos.add(vo);             }         } catch (SQLException e) {             System.out.println("SQL 에러(getMemberList) : " + e.getMessage());         } finally {             getConn.rsClose();         }         return vos;     } Colored by Color Scripter

cs

adminMemList.jsp

참고로 dataTables 자체 함수나 변수 등의 사용예가 포함되어 있어요. 우리가 배운 것과는 조금 다릅니다. 자체적으로 만들어둔거라.

35~55번 줄처럼 작성하면, 값을 가져와서 complete되면 각 열을 클릭할 때 console에 열의 정보가 JSON형태로 찍혀요.

그 후 나중에 사용할 용도로 해당 column과 같은 id 값을 미리 value로 지정해두면

수정할 때 사용이 가능합니다. 혹시 몰라서 modify(수정) 페이지 코드도 올려둘게요.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var="ctp" value="${pageContext.request.contextPath}"/> <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>adminMemList.jsp</title>     <jsp:include page="/include/bs4.jsp" />      <!-- 관리자 페이지 용 --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"/>      <style>         body {             font-family: 'SUITE-Regular';         }         #c {          font-size: 15px;         margin: 100px 60px 200px 40px;       }     </style>          <script>         /* $(document).ready(function() { 이렇게 적어도 된다!! */         jQuery(function($){                          let table = $('#memberTable').DataTable({                 responsive: true,              "ajax": {                 "url" : '${ctp}/AdminMemListOK.kn_ad',                                      complete: function(data) {                         $('#memberTable tbody').on('click', 'tr', function (e) {                             const rowData = table.row(this).data()                             console.log('클릭한 행 데이터', rowData);                             $('#idx').val(rowData.idx);                             $('#mid').val(rowData.mid);                             $('#name').val(rowData.name);                             $('#email').val(rowData.email);                             $('#tel').val(rowData.tel);                             $('#birthday').val(rowData.birthday);                             $('#address').val(rowData.address);                             $('#gender').val(rowData.gender);                             $('#memType').val(rowData.memType);                             $('#level').val(rowData.level);                             $('#levelStartDate').val(rowData.levelStartDate);                             $('#levelExpireDate').val(rowData.levelExpireDate);                             $('#totCnt').val(rowData.totCnt);                             $('#todayCnt').val(rowData.todayCnt);                             $('#firstVisit').val(rowData.firstVisit);                             $('#lastVisit').val(rowData.lastVisit);                             $('#memberDel').val(rowData.memberDel);                                                      })                     }              },               columns: [                   {data: "idx"},                   {data: "mid"},                   {data: "name"},                   {data: "email"},                   {data: "tel"},                   {                       data: "birthday",                        render: function(data) {                           data = data.substring(0,10);                           return data                         }                            },                   {                       data: "address",                         render: function(data) {                             let regExp = /^(?=.*[0-9])[0-9/\s]$/g; // 숫자 1개 이상 필수, /와 공백 허용                                                        if(!regExp.test(data)) {                               return ''                           }                           else {                               return data                           }                       }                                         },                   {                       data: "gender",                         render: function(data) {                           if(data == "미선택") {                               return ''                           }                           else {                               return data                           }                       }                                           },                   {data: "memType"},                   {data: "level"},                   {data: "levelStartDate"},                   {data: "levelExpireDate"},                   {data: "totCnt"},                   {data: "todayCnt"},                   {data: "firstVisit"},                   {data: "lastVisit"},                   {                       data: "memberDel",                       render: function(data) {                           if(data == "NO") {                               return '<button class="btn btn-primary btn-sm" xxxxonclick="falseClick()" >'+data+'</a>'                           }                           else {                               return '<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteClick">'+data+'</button>'                           }                       }                                        }             ],                          columnDefs: [                 {targets:0, width:5},                 {targets:16, width:20},                 /* {"sClass": "badge badge-success", "aTargets":[4]} */             ],                          scrollX: 100,             scrollY: 500,                          "language": {             "emptyTable": "데이터가 없어요.",             "lengthMenu": "페이지당 _MENU_ 개씩 보기",             "info": "현재 _START_ - _END_ / _TOTAL_건",             "infoEmpty": "데이터 없음",             "infoFiltered": "( _MAX_건의 데이터에서 필터링됨 )",             "search": "에서 검색: ",             "zeroRecords": "일치하는 데이터가 없어요.",             "loadingRecords": "로딩 중...",             "processing":     "잠시만 기다려 주세요...",             "paginate": {                 "next": "▶",                 "previous": "◀"             }             }/* ,             createdRow: function (row, data, dataIndex, full) {                     // <tr>에 접근하여 속성값 부여하기                 $(row).attr('id', data.name);                 $(row).attr('name', data.todayCnt);                                  // <tr>의 <td>에 접근하여 조작하기                  $(row).children('td:nth-child(17)').attr('class', 'badge badge-success');                  $(row).children('td').css('background-color', 'white');                 $(row).children('td:nth-child(17)').text();                  }, */                          });                      $('#memberTable_filter').prepend('<select id="select"></select>');         $('#memberTable > thead > tr').children().each(function (indexInArray, valueOfElement) {              $('#select').append('<option>'+valueOfElement.innerHTML+'</option>');         });         $('#memberTable_filter').prepend('<input type="text" id="toDate" placeholder="yyyy-MM-dd" style="width:150px; border-radius: 20px;">');         $('#memberTable_filter').prepend('<input type="text" id="fromDate" placeholder="yyyy-MM-dd" style="width:150px; border-radius: 20px;"> ~ ');       /*     $('.dataTables_filter input').unbind().bind('keyup', function () {             var colIndex = document.querySelector('#select').selectedIndex;             table.column(colIndex).search(this.value).draw();         }); */                  });                    function falseClick() {             alert('해당 회원은 삭제처리 불가능합니다.');         }                  function memberDel() {             let adminPwd = memberDelForm.pwd.value;             let idx = memberDelForm.idx.value;                          if(adminPwd != '1234') {                 alert('관리자 비밀번호 오류입니다.');                 return false;                             }             let ans = confirm‎('삭제하시겠습니까?');             if(!ans) return false;                          else {           $.ajax({               type: "post",               url: "${ctp}/AdminMemberDelOK.kn_ad",               data: {idx : idx},               success: function(res){                   if(res == 1){                       alert("탈퇴 완료");                       location.reload();                   }                   else{                       alert("탈퇴 실패");                   }               },               error:function(){                   alert("전송 오류");               }           });             }         }     </script> </head> <body>      <div id="c">         <div style="text-align:center"><span class="text-center" style="font-size:40px; text-align:center; font-weight:500">회원 조회</span></div>         <div style="text-align:center"><span class="text-center" style="font-size:15px; text-align:center; font-weight:300; color:blue">탈퇴 처리 가능창</span></div>         <button class="btn btn-success text-left mb-4" xxxxonclick="location.href='${ctp}/AdminMemModify.kn_ad';">회원 수정창</button>     <table id="memberTable" class="table table-hover table-bordered">             <thead>                 <tr style="background-color:#ECF2FF">                     <th class="text-center">No</th>                     <th class="text-center">아이디</th>                     <th class="text-center">성명</th>                     <th class="text-center">이메일</th>                     <th class="text-center">전화번호</th>                     <th class="text-center">생년월일</th>                     <th class="text-center">주소</th>                     <th class="text-center">성별</th>                     <th class="text-center">회원 종류</th>                     <th class="text-center">멤버십 레벨</th>                     <th class="text-center">멤버십 시작 날짜</th>                     <th class="text-center">멤버십 만료 날짜</th>                     <th class="text-center">총 방문</th>                     <th class="text-center">오늘 방문</th>                     <th class="text-center">가입일</th>                     <th class="text-center">마지막 방문일</th>                     <th class="text-center">탈퇴신청</th>                 </tr>             </thead>             <tbody class="text-center">             </tbody>     </table>     </div>        <!-- The Modal -->   <div class="modal fade" id="deleteClick">     <div class="modal-dialog modal-dialog-centered">       <div class="modal-content">                <!-- Modal Header -->         <div class="modal-header">           <h4 class="modal-title text-center">회원 탈퇴 승인창</h4>           <button type="button" class="close" data-dismiss="modal">&times;</button>         </div>                  <!-- Modal body -->         <div class="modal-body">             <form name="memberDelForm">                   <div class="row mb-4">                       <div class="col-sm text-danger">해당 회원을 탈퇴 처리하시려면 관리자 비밀번호를 입력해주세요.</div>                   </div>                   <div class="row mb-2">                       <div class="col-sm">관리자 비밀번호: <input type="password" name="pwd" id="pwd" class="form-control"/></div>                       <input type="hidden" name="idx" id="idx"/>                   </div>             </form>         </div>                  <!-- Modal footer -->         <div class="modal-footer">           <button type="button" class="btn btn-secondary" xxxxonclick="xxxxjavascript:memberDel()">탈퇴 승인</button>           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>         </div>                </div>     </div>   </div>      </body> </html>   Colored by Color Scripter

cs

adminMemModify.jsp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var="ctp" value="${pageContext.request.contextPath}"/> <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>adminMemModify.jsp</title>     <jsp:include page="/include/bs4.jsp" />      <!-- 관리자 페이지 용 --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"/>      <style>         body {             font-family: 'SUITE-Regular';         }         #c {          font-size: 15px;         margin: 100px 60px 200px 40px;       }     </style>          <script>         /* $(document).ready(function() { 이렇게 적어도 된다!! */         jQuery(function($){                          let table = $('#memberTable').DataTable({                 responsive: true,             "ajax": {                     "url" : '${ctp}/AdminMemListOK.kn_ad',                                          complete: function(data) {                         $('#memberTable tbody').on('click', 'tr', function (e) {                             const rowData = table.row(this).data()                             console.log('클릭한 행 데이터', rowData);                             $('#idx').val(rowData.idx);                             $('#mid').val(rowData.mid);                             $('#name').val(rowData.name);                             $('#email').val(rowData.email);                             $('#tel').val(rowData.tel);                             $('#birthday').val(rowData.birthday);                             $('#address').val(rowData.address);                             $('#gender').val(rowData.gender);                             $('#memType').val(rowData.memType);                             $('#level').val(rowData.level);                             $('#levelStartDate').val(rowData.levelStartDate);                             $('#levelExpireDate').val(rowData.levelExpireDate);                             $('#totCnt').val(rowData.totCnt);                             $('#todayCnt').val(rowData.todayCnt);                             $('#firstVisit').val(rowData.firstVisit);                             $('#lastVisit').val(rowData.lastVisit);                             $('#memberDel').val(rowData.memberDel);                                                          // $(input).val(rowData.mid);                         })                     }             },                           columns: [                   {data: "idx"},                   {                       data: "mid",                         render: function(data) {                           if(data != "") {                               return '<button class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#modifyClick">'+data+'</a>'                           }                       }                   },                   {data: "name"},                   {data: "email"},                   {data: "tel"},                   {data: "birthday"},                   {data: "address"},                   {data: "gender"},                   {data: "memType"},                   {data: "level"},                   {data: "levelStartDate"},                   {data: "levelExpireDate"},                   {data: "totCnt"},                   {data: "todayCnt"},                   {data: "firstVisit"},                   {data: "lastVisit"},                   {data: "memberDel",                       render: function(data) {                           if(data == "NO") {                               return '<font color="blue"><b>'+data+'</b></font>'                           }                           else {                               return '<font color="red"><b>'+data+'</b></font>'                           }                       }                                        }             ],                          columnDefs: [                 {targets:0, width:5},                 {targets:16, width:20},                 /* {"sClass": "badge badge-success", "aTargets":[4]} */             ],                          scrollX: 100,             scrollY: 500,                          "language": {             "emptyTable": "데이터가 없어요.",             "lengthMenu": "페이지당 _MENU_ 개씩 보기",             "info": "현재 _START_ - _END_ / _TOTAL_건",             "infoEmpty": "데이터 없음",             "infoFiltered": "( _MAX_건의 데이터에서 필터링됨 )",             "search": "에서 검색: ",             "zeroRecords": "일치하는 데이터가 없어요.",             "loadingRecords": "로딩 중...",             "processing":     "잠시만 기다려 주세요...",             "paginate": {                 "next": "▶",                 "previous": "◀"             }             },             createdRow: function (row, data, dataIndex, full) {                     // <tr>에 접근하여 속성값 부여하기                 $(row).attr('id', data.name);                 $(row).attr('name', data.todayCnt);                                  // <tr>의 <td>에 접근하여 조작하기 /*                 $(row).children('td:nth-child(17)').attr('class', 'badge badge-success'); */                 $(row).children('td').css('background-color', 'white');                 $(row).children('td:nth-child(17)').text();                  },                          });                                                                      /*                       // 값 수정용                     let table = $('#memberTable').DataTable();                          // 마우스 클릭 이벤트를 잡아낸다.             $('#memberTable tbody').on('click','td',function() {                 let cell = table.cell(this);                 clickCellInputId = cell.index().row;                 console.log('clickCellInputId : ',clickCellInputId);             });              */                      $('#memberTable_filter').prepend('<select id="select"></select>');         $('#memberTable > thead > tr').children().each(function (indexInArray, valueOfElement) {              $('#select').append('<option>'+valueOfElement.innerHTML+'</option>');         });         $('#memberTable_filter').prepend('<input type="text" id="toDate" placeholder="yyyy-MM-dd" style="width:150px; border-radius: 20px;">');         $('#memberTable_filter').prepend('<input type="text" id="fromDate" placeholder="yyyy-MM-dd" style="width:150px; border-radius: 20px;"> ~ ');       /*     $('.dataTables_filter input').unbind().bind('keyup', function () {             var colIndex = document.querySelector('#select').selectedIndex;             table.column(colIndex).search(this.value).draw();         }); */                  });           function memberModify(){             let ans = confirm‎('수정하시겠습니까?');             if(!ans) return false;              /*           let idx =    $('#idx').val(),             let mid =    $('#mid').val();             let name =    $('#name').val();             let email =    $('#email').val();             let tel =    $('#tel').val();             let birthday =    $('#birthday').val();             let address =    $('#address').val();             let gender = $('#gender').val();             let memType =    $('#memType').val();             let level =    $('#level').val();             let levelStartDate =    $('#levelStartDate').val();             let levelExpireDate =    $('#levelExpireDate').val();             let totCnt =    $('#totCnt').val();             let todayCnt =    $('#todayCnt').val();             let firstVisit =    $('#firstVisit').val();             let lastVisit =    $('#lastVisit').val();             let memberDel =    $('#memberDel').val();          */           let idx =    memberForm.idx.value             let mid =    memberForm.mid.value;             let name =    memberForm.name.value;             let email =    memberForm.email.value;             let tel =    memberForm.tel.value;             let birthday =    memberForm.birthday.value;             let address =    memberForm.address.value;             let gender =    memberForm.gender.value;             let memType =    memberForm.memType.value;             let level =    memberForm.level.value;             let levelStartDate =    memberForm.levelStartDate.value;             let levelExpireDate =    memberForm.levelExpireDate.value;             let totCnt =    memberForm.totCnt.value;             let todayCnt =    memberForm.todayCnt.value;             let firstVisit =    memberForm.firstVisit.value;             let lastVisit =    memberForm.lastVisit.value;             let memberDel =    memberForm.memberDel.value;                let query = {               idx : idx,               mid : mid,               name : name,               email : email,               tel : tel,               birthday : birthday,               address : address,               gender : gender,               memType : memType,               level : level,               levelStartDate : levelStartDate,               levelExpireDate : levelExpireDate,               totCnt : totCnt,               todayCnt : todayCnt,               firstVisit : firstVisit,               lastVisit : lastVisit,               memberDel : memberDel       }               $.ajax({           type: "post",           url: "${ctp}/AdminMemModifyOK.kn_ad",           data: query,           success: function(res){               if(res == 1){                   alert("수정 완료");                   location.reload();               }               else{                   alert("수정 실패");               }           },           error:function(){               alert("전송 오류");           }       });     }     </script> </head> <body>     <div id="c">         <div style="text-align:center"><span class="text-center" style="font-size:40px; text-align:center; font-weight:500">회원 수정</span></div>         <div style="text-align:center"><span class="text-center" style="font-size:15px; text-align:center; font-weight:300; color:red">수정할 아이디를 클릭하세요</span></div>         <button class="btn btn-danger text-left mb-4" xxxxonclick="location.href='${ctp}/AdminMemList.kn_ad';">회원 조회창</button>      <table id="memberTable" class="table table-hover table-bordered ">             <thead>                 <tr style="background-color:#FFF4D2">                     <th class="text-center">No</th>                     <th class="text-center">아이디</th>                     <th class="text-center">성명</th>                     <th class="text-center">이메일</th>                     <th class="text-center">전화번호</th>                     <th class="text-center">생년월일</th>                     <th class="text-center">주소</th>                     <th class="text-center">성별</th>                     <th class="text-center">회원 종류</th>                     <th class="text-center">멤버십 레벨</th>                     <th class="text-center">멤버십 시작 날짜</th>                     <th class="text-center">멤버십 만료 날짜</th>                     <th class="text-center">총 방문</th>                     <th class="text-center">오늘 방문</th>                     <th class="text-center">가입일</th>                     <th class="text-center">마지막 방문일</th>                     <th class="text-center">탈퇴신청</th>                 </tr>             </thead>             <tbody class="text-center">             </tbody>     </table>     </div>            <!-- The Modal -->   <div class="modal fade" id="modifyClick">     <div class="modal-dialog modal-dialog-centered modal-lg">  <!--modal-lg 로 할까?  -->       <div class="modal-content">                <!-- Modal Header -->         <div class="modal-header">           <h4 class="modal-title">회원 상세 수정</h4>           <button type="button" class="close" data-dismiss="modal">&times;</button>         </div>                  <!-- Modal body -->             <div class="modal-body">               <form name="memberForm">                   <div class="row mb-2">                       <div class="col-sm-6">고유번호: <input type="text" name="idx" id="idx" readonly class="form-control" style="background-color:#ECF2FF"/></div>                       <div class="col-sm-6">아이디: <input type="text" name="mid" id="mid" class="form-control"/></div>                   </div>                   <div class="row mb-2">                       <div class="col-sm-6">성명: <input type="text" name="name" id="name" class="form-control"/></div>                       <div class="col-sm-6">이메일: <input type="text" name="email" id="email" class="form-control"/></div>                   </div>                   <div class="row mb-4">                       <div class="col-sm-6">전화번호: <input type="text" name="tel" id="tel" class="form-control"/></div>                       <div class="col-sm-6">생년월일: <input type="text" name="birthday" id="birthday" class="form-control"/></div>                   </div>                   <div class="row mb-2">                       <div class="col-sm text-left">주소: <input type="text" name="address" id="address" class="form-control"/></div>                   </div>                   <div class="row mb-2">                       <div class="col">                         성별 :                           <select name="gender" id="gender" class="form-control mb-2">                             <option value="여성">여성</option>                             <option value="남성">남성</option>                             <option value="미선택">미선택</option>                         </select>                       </div>                   </div>                   <div class="row">                       <div class="col-sm-6">                         회원 종류 :                          <select name="memType" id="memType" class="form-control mb-2">                             <option value="개인">개인</option>                             <option value="매장">매장</option>                         </select>                       </div>                       <div class="col-sm-6">                           멤버십 레벨 :                          <select name="level" id="level" class="form-control mb-4">                             <option value="0">관리자</option>                             <option value="1">매장회원</option>                             <option value="2">옐로우스마일</option>                             <option value="3">민트스마일</option>                             <option value="4">퍼플스마일</option>                         </select>                       </div>                   </div>                   <div class="row mb-2">                       <div class="col-sm-6">멤버십 시작 날짜: <input type="text" name="levelStartDate" id="levelStartDate" class="form-control"/></div>                       <div class="col-sm-6">멤버십 만료 날짜: <input type="text" name="levelExpireDate" id="levelExpireDate" class="form-control"/></div>                   </div>                             <div class="row mb-2">                       <div class="col-sm-6">총 방문 수: <input type="number" name="totCnt" id="totCnt" class="form-control"/></div>                       <div class="col-sm-6">오늘 방문 수: <input type="number" name="todayCnt" id="todayCnt" class="form-control"/></div>                   </div>                         <div class="row mb-2">                       <div class="col-sm-6">가입일: <input type="text" name="firstVisit" id="firstVisit" class="form-control"/></div>                       <div class="col-sm-6">마지막 방문일: <input type="text" name="lastVisit" id="lastVisit" class="form-control"/></div>                   </div>                         <div class="row mb-2">                       <div class="col-sm-6">탈퇴 신청 여부: <input type="text" name="memberDel" id="memberDel" readonly style="background-color:#ECF2FF" class="form-control"/></div>                       <div class="col-sm-6">&nbsp;&nbsp;<input type="button" value="수정" xxxxonclick="memberModify()" class="btn btn-success form-control"/></div>                   </div>               </form>                 </div>                    <!-- Modal footer -->           <div class="modal-footer">             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>           </div>                </div>     </div>   </div>    </body> </html>   Colored by Color Scripter

cs