Add: copy table contents to clipboard

src/web/module/maestro_section_record.html

@@ -13,19 +13,45 @@ $(document).ready(function() {
 });
 
 
+function copyToClipboard() {
+	console.log("copyToClipboard();");
+	var data = $("#dataTable")
+};
+
+
+  function selectElementContents(el) {
+    var body = document.body, range, sel;
+    if (document.createRange && window.getSelection) {
+        range = document.createRange();
+        sel = window.getSelection();
+        sel.removeAllRanges();
+        try {
+            range.selectNodeContents(el);
+            sel.addRange(range);
+        } catch (e) {
+            range.selectNode(el);
+            sel.addRange(range);
+        }
+    } else if (body.createTextRange) {
+        range = body.createTextRange();
+        range.moveToElementText(el);
+        range.select();
+    }
+    document.execCommand("Copy");
+}
+
+
 </script>
 
 
 
+
 <div class="card border-dark mb-3">
 	<div class="card-header">검색 조건</div>
 	<div class="card-body text-dark">
 		<form>
-			<div class="form-group row">
+			<div class="form-group row mb-0">
-				<div class="form-group form-check col-sm-2 py-2">
+				<h5 class="col-sm-2 my-2 text-right">날짜</h5>
-					<input type="checkbox" class="form-check-input" id="exampleCheck1">
-					<label class="form-check-label" for="exampleCheck1">시간</label>
-				</div>
 				<div class="col-sm-10">
 					<div class="form-row align-items-center">
 						<div class="col-auto">
@@ -44,30 +70,30 @@ $(document).ready(function() {
 							<button type="button" class="btn btn-outline-primary btn-sm" onClick="">+1M</button>
 						</div>
 					</div>
-					<small id="emailHelp" class="form-text text-muted">모든 날짜 데이터를 검색하려면, 시간 체크 박스를 해제하세요.</small>
+					<div class="form-group form-check">
+						<input type="checkbox" class="form-check-input" id="timeCheck">
+						<label class="form-check-label text-muted" for="timeCheck">날짜 검색 기능 활성화</label>
+					</div>
 				</div>
 			</div>
 
-			<div class="form-group row">
+			<div class="form-group row mb-0">
-				<div class="form-group form-check col-sm-2 py-2">
+				<h5 class="col-sm-2 my-2 text-right">학생 이름</h5>
-					<input type="checkbox" class="form-check-input" id="exampleCheck1">
-					<label class="form-check-label" for="exampleCheck1">학생 이름</label>
-				</div>
 				<div class="col-sm-10">
 					<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
-					<small id="emailHelp" class="form-text text-muted">모든 학생 데이터를 검색하려면, 학생 이름 체크 박스를 해제하세요.</small>
+					<div class="form-group form-check">
+						<input type="checkbox" class="form-check-input" id="exampleCheck1">
+						<label class="form-check-label text-muted" for="exampleCheck1">학생 이름 검색 기능 활성화</label>
+					</div>
 				</div>
 			</div>
 
-			<div class="form-group row">
+			<div class="form-group row mb-0">
-				<div class="form-group form-check col-sm-2 py-2">
+				<h5 class="col-sm-2 my-2 text-right">과목</h5>
-					<input type="checkbox" class="form-check-input" id="exampleCheck1">
-					<label class="form-check-label" for="exampleCheck1">과목</label>
-				</div>
 				<div class="col-sm-10">
 					<div class="row">
-						<label for="time" class="col-sm-2 col-form-label">타자 연습</label>
+						<label for="time" class="col-sm-2 col-form-label py-0">타자 연습</label>
-						<div class="col-sm-10 py-2">
+						<div class="col-sm-10">
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
 								<label class="form-check-label" for="inlineRadio1">한글 타자 연습</label>
@@ -84,8 +110,8 @@ $(document).ready(function() {
 					</div>
 
 					<div class="row">
-						<label for="time" class="col-sm-2 col-form-label">타자 연습</label>
+						<label for="time" class="col-sm-2 col-form-label py-0">타자 시험</label>
-						<div class="col-sm-10 py-2">
+						<div class="col-sm-10">
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
 								<label class="form-check-label" for="inlineRadio1">한글 타자 연습</label>
@@ -101,20 +127,32 @@ $(document).ready(function() {
 						</div>
 					</div>
 
+					<div class="form-group form-check">
+						<input type="checkbox" class="form-check-input" id="subjectCheck">
+						<label class="form-check-label text-muted" for="subjectCheck">과목 검색 기능 활성화</label>
+					</div>
+
+					<button type="submit" class="btn btn-primary">검색 (30개까지 보기)</button>
+					<button type="submit" class="btn btn-primary">검색 (모든 데이터 보기)</button>
 				</div>
 			</div>
 
-			<button type="submit" class="btn btn-primary">검색</button>
-			<button type="submit" class="btn btn-primary">검색 (모든 데이터 보기)</button>
 		</form>
 	</div>
 </div>
 <br/>
 
 
+<div class="row justify-content-between mb-2">
+	<div class="col-auto">
+		<button type="button" class="btn btn-primary" onClick="selectElementContents( document.getElementById('dataTable') );">표 내용을 클립보드에 복사</button>
+	</div>
+	<div class="col-auto">
+		<button type="button" class="btn btn-primary">표 내용을 엑셀 파일로 다운로드</button>
+	</div>
+</div>
 
-
+<table class="table table-striped" id="dataTable">
-<table class="table table-striped">
 	<thead class="thead-dark">
 	<tr>
 		<th scope="col">#</th>