이 작동하지만 당신은 그것을 향상시킬 수있는 것이 아니라 흐름은 당신을 도울 수로 .
나는 바이올린을 업데이트 한
https://jsfiddle.net/o6ysgzps/26/ ,
당신이 볼 수 있듯이, 내가 만든 테이블의 목록을 수집, 당신은이에 복사 할 테이블을 선택합니다 확인 상자에 각 테이블에 루프 ., 당신은
HTML,
당신은 청소기를 만들 수 있습니다, 더 나은 만들기 위해 부트 스트랩 모달 및 JQuery와 확인을 사용할 수 있습니다
<body>
<select id='cboList' style=''></select>
<div class="allTable">
<div class="one" style="padding-bottom:50px">
<h2>TABLE 1</h2>
<table id="table1" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Audience Name</th>
<th>Type</th>
<th>Size</th>
<th>Date Created</th>
</tr>
</thead>
</table>
</div>
<br>
<button id="Copy">COPY ROW »</button>
<!-- <button id="LeftMove" style="float:left;">« left</button> -->
<br>
<h2>TABLE 2</h2>
<div class="two">
<table id="table2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Audience Name</th>
<th>Type</th>
<th>Size</th>
<th>Date Created</th>
</tr>
</thead>
</table>
</div>
<br>
<br>
<br>
<input type="button" class="submitButton" value="Create New Table">
<h2>NEW TABLE GOES HERE</h2>
</div>
</body>
이것은 js입니다
$(document).ready(function() {
var mainTable = $('#table1').dataTable({
"ajax": "https://api.myjson.com/bins/zvujb",
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"scrollY": "200px",
}); // mainTable
var secondTable = $('#table2').dataTable({
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"scrollY": "200px",
"scrollCollapse": "true"
}); // secondTable
mainTable.on('click', 'tbody tr', function() {
$(this).toggleClass('selected');
});
$('#Copy').on('click', function() {
var tables = $(".allTable").find("table*[id]").not("#table1");
tables.each(function(){
console.log(this.id);
var tbl_id = this.id;
var $elem = $(this);
var r = confirm("Copy to table "+tbl_id+"?");
var table_to_copy = $elem.dataTable();
if (r == true) {
copyRows(mainTable, table_to_copy);
alert("Copied!");
} else {
}
});
//
});
}); // end of $(document).ready...
function copyRows(fromTable, toTable) {
var $row = fromTable.find(".selected");
$.each($row, function(k, v) {
if (this !== null) {
addRow = fromTable.fnGetData(this);
toTable.fnAddData(addRow); // <-- Copy Row
// fromTable.fnDeleteRow(this); <-- Move row, delete main row.
}
});
}
var tableIndex = 3;
$('.submitButton').click(function() {
let addIndex = tableIndex++;
var addTable = '<div class="newTable'+ addIndex +'">' +
'<table id="newTable'+ addIndex +'" class="table table-bordered table-hover">' +
'<thead>' +
'<tr>' +
'<th></th>' +
'<th>Audience Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>' +
'</div>';
$('.allTable').append(addTable);
var newTable = $("#newTable"+ addIndex).dataTable({
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"scrollY": "200px",
"scrollCollapse": "true"
}); // newTable
});
감사합니다, 제 생각에는 .. "tableID"에 대한 버튼 드롭 다운 복사본을 만들어야합니다. 맞습니까? – Ananda
예 테이블의 드롭 다운이있는 모달을 만들면 upvote가 매우 높이 평가됩니다. 감사합니다! – apelidoko