Code - chominsoo4245/mjon

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <script type="text/javascript" src="<c:url value='/publish/js/content.js'/>"></script> <script type="text/javascript"> var $tableExcel = null; //엑셀입력 탭 var $tableError = null; //엑셀입력 탭 $(document).ready(function(){ //Tabulator AJAX Data Loading $tableError = new Tabulator("#tabulator_error", { height:"255px", width:"100%", layout:"fitColumns", autoColumns:false, headerHozAlign:"center", validationMode:"highlight", clipboard:false, clipboardCopySelector:"table", clipboardPasteAction:"insert", // insert, update, replace placeholder:"등록 팝업에서 휴대폰을 선택 후 확인해주세요.", //fit columns to width of table (optional) columns:[ //Define Table Columns {title:"이름", field:"name", hozAlign:"center", headerHozAlign: "center", width:125}, {title:"휴대폰", field:"phone", hozAlign:"center", headerHozAlign: "center", width:158}, {title:"미등록 결과", field:"result", hozAlign:"center", headerHozAlign: "center", width:125} ] }); //Tabulator AJAX Data Loading $tableExcel = new Tabulator("#tabulator_excel", { height:"255px", width:"100%", layout:"fitColumns", autoColumns:false, headerHozAlign:"center", validationMode:"highlight", clipboard:false, clipboardCopySelector:"table", clipboardPasteAction:"insert", // insert, update, replace placeholder:"Excel 파일을 업로드 해주세요.", //fit columns to width of table (optional) columns:[ //Define Table Columns {formatter:"rowSelection", titleFormatter:"rowSelection",clipboard:false, headerHozAlign:"center", hozAlign:"center", headerSort:false, cellClick:function(e, cell){ cell.getRow().toggleSelect(); } }, {formatter:"rownum", align:"center" ,title:"No", hozAlign:"center", headerHozAlign:"center", width:60}, {title:"A", field:"A", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"B", field:"B", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"C", field:"C", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"D", field:"D", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"E", field:"E", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"F", field:"F", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]} ], validationFailed:function(cell, value, parameters){ // 유효성 체크 함수 var valid = cell.isValid(); if(!valid){ alert("양식에 맞지 않는 정보가 입력되었습니다."); //해당 셀 데이터 삭제 cell.setValue(""); } return value % parameters.phone; }, }); $("#excelFile").on("change", function(event) { var fileInfo = event.target.files; if(fileInfo.length > 0){ excelFileChange(fileInfo[0]); } else { fn_loadRemoveActive(); // 파일이 선택되지 않은 경우 로딩 상태 제거 setTimeout(() => { $(this).val(''); }, 0); // 파일 선택 초기화 } }); $(document).on('click', '#btnAddrMassClose', function() { // 대량등록 닫기 setAddrMassClose(); }); $(document).on('click', '#closeBtn', function() { // 대량등록 닫기 setAddrMassClose(); }); // 엑셀등록 닫기 function setAddrMassClose() { $tableExcel.clearData(); $("#excelRowTotCnt").text(0); //총건수 수정 $("#excelRowDupCnt").text(0); //중복건수 수정 $("#excelRowErrorCnt").text(0); //중복건수 수정 dupliPhoneDataRealList.length = 0; // 중복 휴대폰번호 초기화 addrMassDupliSaveList = null; // popup 영역 $tableError.clearData(); // 중복 카운트 $("#errorPopDupCnt").text(0); // 에러 카운트 $("#errorPopErrorCnt").text(0); // $("#errorPopTotCnt").text(0); } //############################################################################################# //파일업로드 드래그앤 드롭 //############################################################################################# var objDragAndDrop = $(".upload_area"); $(document).on("dragenter",".upload_area",function(e){ e.stopPropagation(); e.preventDefault(); //$(this).css('border', '2px solid #0B85A1'); }); $(document).on("dragover",".upload_area",function(e){ e.stopPropagation(); e.preventDefault(); }); $(document).on("drop",".upload_area",function(e){ fn_loadAddActive(); e.preventDefault(); var files = e.originalEvent.dataTransfer.files; excelFileChange(files[0]); }); $(document).on('dragenter', function (e){ e.stopPropagation(); e.preventDefault(); }); $(document).on('dragover', function (e){ e.stopPropagation(); e.preventDefault(); //objDragAndDrop.css('border', '2px dotted #0B85A1'); }); $(document).on('drop', function (e){ e.stopPropagation(); e.preventDefault(); }); //파일 드래그앤드롭 종료 //타이틀 select 선택 이벤트 $('.field-selector').on('change', function() { fn_loadAddActive(); setTimeout(() => { var selectedFields = []; var isDuplicate = false; if($tableExcel.getData().length < 1){ alert('데이터 입력 후 선택해 주세요.'); $(this).val(""); fn_loadRemoveActive(); return false; } // 중복체크 $('.field-selector').each(function() { var selectedField = $(this).val(); if (selectedField) { if (selectedFields.includes(selectedField)) { alert("중복된 필드를 선택할 수 없습니다."); $(this).val(""); // 중복 필드를 선택한 경우 빈 값으로 초기화 isDuplicate = true; return false; // 반복문 종료 } selectedFields.push(selectedField); } }); // updateTableFields($tableExcel); // 필드가 휴대폰이면 열 중복체크 if($(this).val() == 'addrPhoneNo'){ fn_phoneDupl($tableExcel); } fn_loadRemoveActive(); }, 0); // 지연 없이 즉시 실행되도록 0ms 지연을 설정 }); // 받는사람 선택삭제 버튼 처리해주기 $('#in_select_del').click(function(){ if($tableExcel == null || $tableExcel == ""){ alert("받는사람을 추가해 주세요."); return false; } var selectedData = $tableExcel.getSelectedRows(); if(selectedData == "" || selectedData == null){ alert("삭제할 연락처를 선택해주세요."); return false; }else{ // 선택한 Row 데이터 삭제하기 if(confirm("선택하신 받는 사람을 삭제하시겠습니까?")){ // 선택 데이터 삭제 selectedData.forEach(row => row.delete()); totRows = $tableExcel.getRows().length; $("#excelRowTotCnt").text(totRows); } } }); // 추가버튼 $('#btnAddrMassReg').click(function(){ if($tableExcel.getData().length < 1){ alert("한 개 이상의 연락처를 입력하세요"); return false; } // else if (selectedData.length > 20000) { // alert("2만줄 이상의 업로드는 데이터 부하로 업로드 할수 없습니다."); // return false; // } // tableExcel 그룹의 select 요소들을 확인 // var isPhoneSelected = false; // var isNameSelected = false; var columns = $tableExcel.getColumns(); var isAddrPhoneNoSelected = columns.some(column => column.getField() === 'addrPhoneNo'); if (!isAddrPhoneNoSelected) { // isPhoneSelected = true; alert('휴대폰이 선택되지 않았습니다.'); return false; } var addrData = $tableExcel.getData().map((row, index) => ({ name: row.addrNm, phone: removeDash(row.addrPhoneNo), rep1: row.addrInfo1, rep2: row.addrInfo2, rep3: row.addrInfo3, rep4: row.addrInfo4, })); // 기존 tableL의 데이터를 가져옵니다. var existingData = tableL.getData(); // 기존 데이터와 새로운 데이터를 합칩니다. var combinedData = existingData.concat(addrData); // 합쳐진 데이터를 tableL에 설정합니다. tableL.setData(combinedData); // 미리보기 버튼 활성화 updateButtons(0); var totRows = tableL.getRows().length; updateTotCnt(totRows); //전체 데이터 갯수 구하기 console.log('totRows : ', totRows); var smsTxtArea = $('#smsTxtArea').val(); if(smsTxtArea.indexOf("[*이름*]") > -1 || smsTxtArea.indexOf("[*1*]") > -1 || smsTxtArea.indexOf("[*2*]") > -1 || smsTxtArea.indexOf("[*3*]") > -1 || smsTxtArea.indexOf("[*4*]") > -1){ fnReplCell(); }else{ //결제 금액 구하기 totalPriceSum(totRows); } setAddrMassClose(); $('#closeBtn').click(); }); //받는사람 전체삭제 버튼 처리 $('#allDel').click(function(){ var data = $tableExcel.getRows(); $tableExcel.clearData(); $("#excelRowTotCnt").text(0); //총건수 수정 $("#excelRowDupCnt").text(0); //중복건수 수정 dupliPhoneDataRealList.length = 0; // 중복 휴대폰번호 초기화 // select box 초기화 $('.field-selector').each(function() { $(this).val(''); }); }); }); function excelFileChange(file) { if (file) { // 파일 크기 체크 (20MB) const maxSize = 20 * 1024 * 1024; // 20MB in bytes if (file.size > maxSize) { alert('파일 크기는 20MB를 초과할 수 없습니다.'); return; } fn_loadAddActive(); var reader = new FileReader(); var extension = file.name.split('.').pop().toLowerCase(); reader.onload = function(e) { setTimeout(() => { // 파일 읽기 완료 후 실행되도록 함 if (extension === 'xlsx') { var data = new Uint8Array(e.target.result); var workbook = XLSX.read(data, {type: 'array'}); var firstSheet = workbook.Sheets[workbook.SheetNames[0]]; var jsonData = XLSX.utils.sheet_to_json(firstSheet, {header: 1}); processExcelData(jsonData); } else if (extension === 'txt') { var textData = e.target.result; processTextData(textData); } else { alert('지원되지 않는 파일 형식입니다.'); } fn_loadRemoveActive(); }, 0); // 지연 없이 즉시 실행되도록 0ms 지연을 설정 }; if (extension === 'xlsx') { reader.readAsArrayBuffer(file); } else if (extension === 'txt') { reader.readAsText(file); } } } // 엑셀 데이터 처리 함수 function processExcelData(data) { var keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var tableData = []; var totalRows = data.length - 2; // 전체 데이터 수 (1, 2행 제외) // 3번째 행부터 입력 data.slice(0).forEach((row, index) => { var rowData = {}; keys.forEach((key, idx) => { // index 변수명 변경 (내부와 외부에서 사용되므로 충돌 방지) // console.log('row[idx] : ', row[idx]); // rowData[key] = row[idx] ? row[idx].trim() : ""; // 각 컬럼에 대해 기본값을 설정 rowData[key] = (typeof row[idx] === 'string') ? row[idx].trim() : row[idx]; }); tableData.push(rowData); }); updateTable(tableData); } // 텍스트 데이터 처리 함수 function processTextData(text) { var lines = text.split('\n'); // 각 줄을 배열로 분리 var keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var tableData = []; lines.forEach(line => { var rowData = {}; var row = line.split(','); // 쉼표로 분리 keys.forEach((key, index) => { rowData[key] = row[index] ? row[index].trim() : ""; // 각 컬럼에 대해 기본값을 설정 }); tableData.push(rowData); }); updateTable(tableData); } //공통 테이블 업데이트 함수 function updateTable(tableData) { $tableExcel.setColumns([ //Define Table Columns {formatter:"rowSelection", titleFormatter:"rowSelection",clipboard:false, headerHozAlign:"center", hozAlign:"center", headerSort:false, cellClick:function(e, cell){ cell.getRow().toggleSelect(); } }, {formatter:"rownum", align:"center" ,title:"No", hozAlign:"center", headerHozAlign:"center", width:60}, {title:"A", field:"A", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"B", field:"B", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"C", field:"C", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"D", field:"D", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"E", field:"E", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]}, {title:"F", field:"F", hozAlign:"center", headerHozAlign: "center", width:140, validator:["maxLength:100", "string"]} ]); $tableExcel.setData(tableData).then(() => { // excelRowTotCnt 업데이트 document.getElementById("excelRowTotCnt").innerText = tableData.length; }); fn_loadRemoveActive(); } /* * 타이틀 select 선택할때마다 실행해서 * 데이터테이블 필드값 수정 */ function updateTableFields($objTabul) { var currentData = $objTabul.getData(); var columns = [ {formatter: "rowSelection", titleFormatter: "rowSelection", clipboard: false, hozAlign: "center", headerHozAlign: "center", headerSort: false, cellClick: function(e, cell) { cell.getRow().toggleSelect(); }} ,{formatter:"rownum", align:"center", title:"No", hozAlign:"center", headerHozAlign:"center", width:60} ]; var fieldMapping = []; $('.field-selector').each(function(index) { var selectedField = $(this).val(); // ASCII 문자 코드 사용 - 65=A, 66=B ... var field = String.fromCharCode(65 + index); if (selectedField) { columns.push({ title: field , field: selectedField , hozAlign: "center" , headerHozAlign: "center" // , editor: "input" , editor: false , width: 140 , validator: ["maxLength:100", "string"] }); fieldMapping.push(selectedField); } else { columns.push({ title: field , field: field , hozAlign: "center" , headerHozAlign: "center" , editor: false // , editor: "input" , width: 140 , validator: ["maxLength:100", "string"] }); fieldMapping.push(field); } }); var updatedData = currentData.map(row => { var newRow = {}; fieldMapping.forEach((field, index) => { newRow[field] = row[Object.keys(row)[index]] || ""; }); return newRow; }); $objTabul.setColumns(columns); $objTabul.setData(updatedData); } /** * @ 핸드폰 중복 데이터 * */ function fn_phoneDupl($objTabul) { $tableError.clearData(); var data = $objTabul.getData(); var phoneNumberChk = false; var existingNumbers = new Set(); // 배열에서 Set으로 변경 let errorCount = 0; // 중복 번호 개수를 저장할 변수 let duplicateCount = 0; // 중복 번호 개수를 저장할 변수 const errors = []; // 오류 데이터를 저장할 배열 const newData = []; // 유효한 데이터만 저장할 새로운 배열 data.forEach((row, index) => { const number = row.addrPhoneNo; // number가 null, undefined, 빈 문자열이거나 숫자인 경우 처리 if (!number || (typeof number === 'string' && !number.trim())){ console.log("number : ", number); return; } const formattedNumber = formatPhoneNumber(number); // 번호 표준화 const cleanedNumber = formattedNumber.replace(/[^0-9]/g, ''); // 숫자만 남김 if (!existingNumbers.has(cleanedNumber)) { // 중복 번호 체크 if (isValidPhoneNumber(formattedNumber)) { // 유효성 검사 row.addrPhoneNo = formattedNumber; existingNumbers.add(cleanedNumber); // 추가된 번호를 기존 목록에 추가 newData.push(row); // 유효한 데이터만 새로운 배열에 추가 } else { // 오류: 유효성 통과 못함 errorCount++; errors.push({ name: row.addrNm, // 이름 phone: row.addrPhoneNo, // 폰번호 result: "오류" // 결과 메시지 추가 }); } } else { // 중복 duplicateCount++; errors.push({ name: row.addrNm, // 이름 phone: row.addrPhoneNo, // 폰번호 result: "중복" // 결과 메시지 추가 }); } }); // data 배열을 newData 배열로 대체 data = newData; // 수정된 데이터로 테이블 업데이트 $objTabul.setData(data); // 오류 총 카운트 $("#excelRowTotCnt").text($objTabul.getDataCount()); // 중복 카운트 $("#excelRowDupCnt").text(duplicateCount); // 에러 카운트 $("#excelRowErrorCnt").text(errorCount); // popup 영역 $("#errorPopTotCnt").text($objTabul.getDataCount()); // 중복 카운트 $("#errorPopDupCnt").text(duplicateCount); // 에러 카운트 $("#errorPopErrorCnt").text(errorCount); $tableError.setData(errors); if(errorCount > 0){ alert('휴대폰 형식에 맞지 않는 데이터는 삭제 후 업로드 됩니다.\nex) 발송불가 특수문자, 자릿수 오류 등'); } } function fn_dupliPopupShow(){ $("#tableExcelDupliBtn").show(); } function makeAddrMassDupliPop(dupliPhoneDataRealList) { var sHtml = ""; sHtml += "<div class='' style='overflow-x:auto; height:350px;'>"; sHtml += "<table class='tType4'>"; sHtml += " <colgroup>"; sHtml += " <col style='width:auto' />"; sHtml += " </colgroup>"; sHtml += " <thead>"; sHtml += " <tr>"; sHtml += " <th>중복 휴대폰번호 (" + numberWithCommas(dupliPhoneDataRealList.length) + "개)</th>"; sHtml += " </tr>"; sHtml += " </thead>"; sHtml += " <tbody>"; for (var i = 0; i < dupliPhoneDataRealList.length; i++) { sHtml += " <tr>"; sHtml += " <td>" + dupliPhoneDataRealList[i] + "</td>"; sHtml += " </tr>"; } sHtml += " </tbody>"; sHtml += " </table>"; sHtml += " </div>"; $("#addrMassDupli_layer").html(sHtml); fn_dupliPopupShow(); } function fn_dupliPopupShow(){ $('#tableExcelDupliBtn').show(); } //한국의 핸드폰 번호 형식 검사 함수 function isValidKoreanPhoneNumber(phone) { // 하이픈(-)을 제거하고 숫자만 남긴 후 검사 var cleaned = phone.replace(/-/g, ''); // 010, 011, 016, 017, 018, 019로 시작하고 10~11자리인 경우 유효 var valid = /^(010|011|016|017|018|019)\d{7,8}$/.test(cleaned); return valid; } // 상단 설명 더보기 function popMore(e){ $(e).closest(".pop_more_cont").toggleClass("pop_more_click"); if($(e).closest(".pop_more_cont").is(".pop_more_click")){ $(e).html('숨기기'); $(e).append('<i></i>'); }else { $(e).html('더보기'); $(e).append('<i></i>'); } } </script>  <div class="tooltip-wrap"> <div class="popup-com addrMassDupli_layer" tabindex="0" data-tooltip-con="addrMassDupli_layer" data-focus="addrMassDupli_layer" data-focus-prev="addrMassDupli_layer-close" style="width: 270px; height: 500px;"> <div class="popup_heading"> <p>중복 휴대폰번호</p> <button type="button" class="tooltip-close" data-focus="addrMassDupli_layer-close" onclick="setAddrDupliClose();"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button> </div> <div class="layer_in" style="padding:20px 0px;" id="addrMassDupli_layer"> </div> <div class="popup_btn_wrap2" style="margin-top: 0px;"> <button type="button" class="tooltip-close" data-focus="addrMassDupli_layer-close" data-focus-next="addrMassDupli_layer">닫기</button> </div> </div> </div>  <div class="tooltip-wrap"> <div class="popup-com adr_layer adr_popup14" tabindex="0" data-tooltip-con="adr_popup14" data-focus="adr_popup14" data-focus-prev="adr_popu14-close" style="width: 450px;"> <div class="popup_heading"> <p>주소록 상세 결과</p> <button type="button" class="tooltip-close" data-focus="adr_popup14-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button> </div> <div class="layer_in" style="padding:30px 20px;"> <div class="table_top"> <p> 총 <span class="c_e40000" id="errorPopTotCnt">0</span>건 / 중복 <span class="c_002c9a" id="errorPopDupCnt">0</span>건 / 오류 <span class="c_002c9a" id="errorPopErrorCnt">0</span>건</p> <button type="button" class="excel_btn btnType" id="errorExcelBtn"><i class="downroad"></i>엑셀 다운로드</button> </div> <div class="tb_wrap adr_list" id="tabulator_error">  </div> <ul class="cf_text_ul"> <li>*중복번호는 하나의 번호만 등록됩니다.</li> <li>*휴대폰 형식에 맞지 않는 데이터는 삭제 후 업로드 됩니다.</li> <li>ex) 발송불가 특수문자, 자릿수 오류 등</li> </ul> <div class="popup_btn_wrap2">  <button type="button" class="tooltip-close" data-focus="adr_popup14-close" data-focus-next="adr_popup14">닫기</button> </div> </div> </div> </div>  <div class="popup_heading"> <p>엑셀 불러오기</p> <button type="button" class="tooltip-close" id="closeBtn" data-focus="popup02-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button> </div> <div class="layer_in" style="padding: 25px 30px;">          <div class="popCont current pop_more_cont" id="popCont_1"> <div class="titBox"> <p>- 주소록은 한 번에 최대 30만건까지 등록(EXCEL파일, 최대용량 20MB) 가능합니다. </p> <p>- 엑셀 파일에 비밀번호 설정, 제한된 보기, 수식 등이 설정되어 있는 경우 업로드가 불가합니다.</p> <p>- 구분선(|), 역슬래시(＼, ￦), 큰따옴표(") 등 발송불가 특수문자는 저장되지 않습니다.</p> <p>- 이름 200byte, [*1*]~[*4*] 200byte, 메모 250byte까지 입력 가능합니다.</p> <p>- 주소록 등록이 어려우신 경우에는 <a href="<c:url value='/web/mjon/addragency/selectAddrAgencyList.do'/>" style="font-weight: bold; color: blue;">주소록 입력대행</a> 메뉴를 이용하실 수 있습니다. </p> </div> <div class="pop_more_wrap"> <button type="button" class="pop_more" onclick="popMore(this);">더보기<i></i></button> </div> </div>  <div> <table class="layer_tType1"> <caption>엑셀입력 표</caption> <colgroup> <col style="width: 95px"> <col style="width: auto"> </colgroup> <tbody> <tr>  <td colspan="2" style="padding:20px 0;"> <div class="file_upload_wrap" style="width:100%;display:flex;"> <div class="file_add upload_area"> <p><img src="/publish/images/content/file_add.png" alt="파일 붙여넣기">마우스로 엑셀, TXT파일을 여기에 끌어다 놓으세요</p> </div> <input type="file" id="excelFile" accept=".xls, .xlsx, .txt" style="display:none"/> <button type="button" class="excel_btn2 btnType c3"><i class="uproad"></i>엑셀, TXT파일 업로드</button> </div> </td> </tr> </tbody> </table> </div> <div class="excel_middle2"> <p> 총 <span class="c_e40000 fwBold" id="excelRowTotCnt">0</span>건 / 중복 <span class="c_002c9a fwBold" id="excelRowDupCnt">0</span>건 / 오류 <span class="c_002c9a fwBold" id="excelRowErrorCnt">0</span>건 <button type="button" class="btn_list_detail" data-tooltip="adr_popup14"><img src="/publish/images/search.png"></button> </p>     </p>  </div> <div class="adr_excel" style="margin-top: 13px;">  <div class="adr_hd select_adr_hd" data-group="tableExcel"> <div style="width: 100px;"></div> <div style="width: 140px;"> <label for="" class="label"></label> <select class="field-selector"> <option value="">선택하기</option> <option value="addrNm">이름</option> <option value="addrPhoneNo">휴대폰</option> <option value="addrInfo1">[*1*]</option> <option value="addrInfo2">[*2*]</option> <option value="addrInfo3">[*3*]</option> <option value="addrInfo4">[*4*]</option>  </select> </div> <div style="width: 140px;"> <label for="" class="label"></label> <select class="field-selector"> <option value="">선택하기</option> <option value="addrNm">이름</option> <option value="addrPhoneNo">휴대폰</option> <option value="addrInfo1">[*1*]</option> <option value="addrInfo2">[*2*]</option> <option value="addrInfo3">[*3*]</option> <option value="addrInfo4">[*4*]</option>  </select> </div> <div style="width: 140px;"> <label for="" class="label"></label> <select class="field-selector"> <option value="">선택하기</option> <option value="addrNm">이름</option> <option value="addrPhoneNo">휴대폰</option> <option value="addrInfo1">[*1*]</option> <option value="addrInfo2">[*2*]</option> <option value="addrInfo3">[*3*]</option> <option value="addrInfo4">[*4*]</option>  </select> </div> <div style="width: 140px;"> <label for="" class="label"></label> <select class="field-selector"> <option value="">선택하기</option> <option value="addrNm">이름</option> <option value="addrPhoneNo">휴대폰</option> <option value="addrInfo1">[*1*]</option> <option value="addrInfo2">[*2*]</option> <option value="addrInfo3">[*3*]</option> <option value="addrInfo4">[*4*]</option>  </select> </div> <div style="width: 140px;"> <label for="" class="label"></label> <select class="field-selector"> <option value="">선택하기</option> <option value="addrNm">이름</option> <option value="addrPhoneNo">휴대폰</option> <option value="addrInfo1">[*1*]</option> <option value="addrInfo2">[*2*]</option> <option value="addrInfo3">[*3*]</option> <option value="addrInfo4">[*4*]</option>  </select> </div> <div style="width: 140px;"> <label for="" class="label"></label> <select class="field-selector"> <option value="">선택하기</option> <option value="addrNm">이름</option> <option value="addrPhoneNo">휴대폰</option> <option value="addrInfo1">[*1*]</option> <option value="addrInfo2">[*2*]</option> <option value="addrInfo3">[*3*]</option> <option value="addrInfo4">[*4*]</option>  </select> </div>  </div> </div> <div class="drag_drop_wrap callList_includ_box" id="tabulator_excel">  </div> <div class="excel_middle"> <div class="select_btnWrap clearfix"> <div> <button type="button" id="allDel"><i class="remove_img"></i>전체삭제</button> <button type="button" id="in_select_del"><i class="remove_img"></i>선택삭제</button> </div> </div> </div>           <div class="popup_btn_wrap2" style="margin: 0 auto 30px auto;"> <button type="button" id="btnAddrMassReg">추가</button> <button type="button" id="btnAddrMassClose" class="tooltip-close" data-focus="adr_popup01-close" data-focus-next="popup02">닫기</button> </div> </div>