テーブル1のテーブル2の行を追加しようとしています。私は、チェックボックス列の行を選択し、ユーザを追加押すとJqueryデータテーブルはあるテーブルから別のテーブルに行を追加します
は、テーブルにこの行を追加します1
私は入力してクリックした場合の横に、私は、すべての選択またはnoneのためのオプションを持っているユーザーボタンを追加すべて選択する
ボタンを追加したユーザーが押された後、表2のすべての行が表1に追加されます。
私はどれもすべてのチェックボックスをオフにし
を選択した場合、私はクリックすると、すべての選択したすべてのチェックボックス
jsfiddle:http://jsfiddle.net/f7debwj2/11/
HTML:
<br>
<br>
<h1>
table1
</h1><br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Place</th>
<th>Order</th>
</tr>
</thead>
</table>
<br>
<br>
<h1>
table 2
</h1><br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Place</th>
<th>checkbox</th>
</tr>
</thead>
</table>
<div class="col-md-12">
<div class="col-md-6">
<button type="button" class="btn btn-success">Add a user</button>
</div>
<div class="col-md-6">select all or none
<div class="btn-group">
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<input type="checkbox" name="vehicle1" value="Bike">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<ul class="dropdown-menu" role="menu">
<li><a href="#">All</a></li>
<li><a href="#">None</a></li>
</ul>
</div>
</div>
</div>
jqueryの
$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
var table = $('#example').DataTable({
ajax: url,
createdRow: function(row, data, dataIndex) {
$(row).attr('id', 'row-' + dataIndex);
},
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'name'
}, {
data: 'place'
}]
});
table.rowReordering();
});
$(document).ready(function() {
var dt = $('#example2').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
var table = $('#example2').DataTable({
ajax: url,
createdRow: function(row, data, dataIndex) {
$(row).attr('id', 'row-' + dataIndex);
},
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'name'
}, {
data: 'checkbox'
}]
});
table.rowReordering();
});
$(document).ready(function() {
$('body').on('mouseenter', 'input', function() {
$('.btn').prop('disabled', true);
});
$('body').on('mouseout', 'input', function() {
$('.btn').prop('disabled', false);
});
});
ここに質問はありません。質問を編集して質問に関連するコードのみを入力してください。 – Nicolas
質問なし??? – NDFA