Add: copy table contents to clipboard

This commit is contained in:
2019-03-26 18:29:21 +09:00
parent 0b139c3f7c
commit e222c2f31a
+63 -25
View File
@@ -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 form-check col-sm-2 py-2">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">시간</label>
</div>
<div class="form-group row mb-0">
<h5 class="col-sm-2 my-2 text-right">날짜</h5>
<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 form-check col-sm-2 py-2">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">학생 이름</label>
</div>
<div class="form-group row mb-0">
<h5 class="col-sm-2 my-2 text-right">학생 이름</h5>
<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 form-check col-sm-2 py-2">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">과목</label>
</div>
<div class="form-group row mb-0">
<h5 class="col-sm-2 my-2 text-right">과목</h5>
<div class="col-sm-10">
<div class="row">
<label for="time" class="col-sm-2 col-form-label">타자 연습</label>
<div class="col-sm-10 py-2">
<label for="time" class="col-sm-2 col-form-label py-0">타자 연습</label>
<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>
<div class="col-sm-10 py-2">
<label for="time" class="col-sm-2 col-form-label py-0">타자 시험</label>
<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">
<table class="table table-striped" id="dataTable">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>