jQuery - メソッドのselect要素を使用してコピー可能な行テーブル？

Question

私は新しいものを試してみたい

ローテーブルを選択してから要素を選択するとコピーできますか？

.ex：ローテーブルを選択してコピーする場合は、「選択したフォルダをクリックする」という方法でコピーします。

It's like we use function:

  If user select ID #folder1 , copy row to ID #table1

  If user select ID #folder2 , copy row to ID #table2

コピー行のための私の前のコードと私はそれを変更したい：これはちょうどテーブル

Try This JSFiddle Demo

$('#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 { 
     // do nothing.. 
     } 
    }); 
    }); 
}); // 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); 
    } 
    }); 
} 

のための例を検索してコピーするため

を私がJSFiddleを見た場合、私が欲しいもの

[行をコピー]ボタンを削除し、[テーブル名[表2、表3]]をクリックしてコピーします。

I'm need reference for create this function.

私は任意のヘルプは大幅にあなたがこれまでにあなたの「テーブルを見つける」機能に誰かがコピーボタンをクリックするたびに実行されている何をすべきかそう

Answer 1

ボタンをクリックするのではなく、ラベルTABLE2またはTABLE3のヘッダー<h>をクリックしたときに、選択した行をそれぞれの表にコピーするとしました。これが動作する方法は下記を参照してください。

// Code goes here 
 
$(document).ready(function() { 
 
    /*********** mainTable ***************/ 
 
    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 
 

 
    /*********** SecondTable ***************/ 
 
    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 
 

 
    /*********** ThirdTable ***************/ 
 
    var ThirdTable = $('#table3').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" 
 

 
    }); // ThirdTable 
 

 
    /*************** SelecT OPTION ****************/ 
 

 
    mainTable.on('click', 'tbody tr', function() { 
 
    $(this).toggleClass('selected'); 
 
    }); 
 

 
    $('#copyToTable2,#copyToTable3').on('click', function() { 
 

 
    let $elem = $(this); 
 
    var table = $("#table" + $elem.attr('id').replace(/[a-zA-Z]/ig, '')); 
 
    var tbl_id = table.attr('id'); 
 

 
    var $row = mainTable.find(".selected"); 
 
    if (!$row.length) { 
 
     console.log('You must select some rows to copy first'); 
 
     return; 
 
    } else { 
 
     var r = confirm("Copy to table " + tbl_id + "?"); 
 
     var table_to_copy = table.dataTable(); 
 
     if (r == true) { 
 
     copyRows(mainTable, table_to_copy); 
 
     console.log("Copied!"); 
 
     setTimeout('console.clear()', 2000); 
 
     } else { 
 
     // do nothing.. 
 
     } 
 

 
    } 
 

 
    }); 
 
}); // 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); 
 
    } 
 
    }); 
 
}

/* Styles go here */ 
 

 
#table2_wrapper { 
 
    margin-top: 50px; 
 
    margin-left: 50px; 
 
} 
 

 
#table1_wrapper { 
 
    margin-left: 50px; 
 
} 
 

 
table.dataTable tbody tr.selected { 
 
    background-color: #b0bed9; 
 
} 
 

 
table.dataTable.display tbody tr.odd.selected>.sorting_1, 
 
table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1 { 
 
    background-color: #a6b3cd; 
 
} 
 

 
table.dataTable.display tbody tr:hover.selected>.sorting_1, 
 
table.dataTable.display tbody tr.odd:hover.selected>.sorting_1, 
 
table.dataTable.display tbody tr.even:hover.selected>.sorting_1, 
 
table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1, 
 
table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_1, 
 
table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_1 { 
 
    background-color: #a1aec7; 
 
} 
 

 
#Copy { 
 
    background: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css" rel="stylesheet" /> 
 
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css" rel="stylesheet" /> 
 
<div class="allTable"> 
 
    <div> 
 
    <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> 
 
    <div> 
 
    <br> 
 
    <br> 
 

 
    <h2 id="copyToTable2">TABLE 2</h2> 
 
    <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> 
 
    <h2 id="copyToTable3">TABLE 3</h2> 
 
    <div> 
 
    <table id="table3" 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> 
 
</div>

Answer 2

をいただければ幸いです、あなたは理解してほしいです。

var tables = $(".allTable").find("table*[id]").not("#table1"); 
// ... 
var tbl_id = this.id; //this is one of the tables of the upper set 
var r = confirm("Copy to table " + tbl_id + "?"); 

このロジックは、あなたのすべてのテーブルを既に見つけます。ユーザーがコピーボタンをクリックするたびにすべてのテーブルを検索することは、ページロードの開始時に代わりにtablesの各要素の新しいボタンを作成することができます。各ボタンは、特定のテーブルのコンテキストで実行されるコピーロジックを持つことができます。

$.ready(function(){ 
    var tables = $(".allTable").find("table*[id]").not("#table1"); 
    tables.each(function(){ 
     var currentTable = $(this), 
      tbl_id = currentTable.attr('id'), 
      newButton = $('<button type="button">Copy to table ' + tbl_id + '</button>'); 
     $('#Copy').parent().append(newButton); 
     newButton.click(function(){ 
      var r = confirm("Copy to table " + tbl_id + "?"); 
      //Copy the rows to the currentTable variable 
     }); 
    }); 
}); 

ソリューションを開発するには良いスタートであるべきです。

#copyボタンを削除したい場合は、コピーボタンのラッパーを取得するための別のロジックを見つける必要があります。