これは動作しますが、あなたはそれを改善することができ、私はあなたがここからアイデアを得ることを願って、これは完全に意図したとおりに動作していないが、流れはあなたを助けるかもしれません。
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
はいテーブルのドロップダウンでモーダルを作成すると、アップヴォートが高く評価されます、ありがとう！ – apelidoko